时间戳

首页 > 解决方案 > 带离子载玻片的离子反应转盘

ionic-framework - 带离子载玻片的离子反应转盘

问题描述

在 Ionic-React 中如何使用离子幻灯片创建轮播并希望在 IonList 中使用它，因此图像可以是缩略图或头像。我尝试更改 CSS 但没有运气，而且自动播放也不起作用。

想要纯粹在 ionic 中使用它，以便也可以在移动设备上访问它。


  const slideOptsOne = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: true
  };


        <IonList>
          <IonItem>
            <IonSlides pager={true} options={slideOptsOne}>
              <IonSlide>
              <IonThumbnail slot="start">
                  <img src="image source" className="divSlide"/>
                  </IonThumbnail>
              </IonSlide>
              <IonSlide>
              <IonThumbnail slot="start">
                  <img src="image source" />
              </IonThumbnail>
              </IonSlide>
            </IonSlides>
            <IonLabel>
              <h5>Finn</h5>
              <h6>I'm a big deal</h6>
              <p>Listen, I've had a pretty messed up day...</p>
            </IonLabel>
            <IonLabel>
              <p>Finn</p>
              <p>I'm a big deal</p>
            </IonLabel>
          </IonItem>

          <IonItem>
            <IonSlides pager={true} options={slideOptsOne}>
              <IonSlide>
              <IonThumbnail slot="start">
                  <img src="image source" className="divSlide"/>
                  </IonThumbnail>
              </IonSlide>
              <IonSlide>
              <IonThumbnail slot="start">
                  <img src="image source" />
              </IonThumbnail>
              </IonSlide>
            </IonSlides>
            <IonLabel>
              <h5>Han</h5>
              <h6>Look, kid...</h6>
              <p>I've got enough on my plate as it is, and I...</p>
            </IonLabel>
            <IonLabel>
              <p>Finn</p>
              <p>I'm a big deal</p>
            </IonLabel>
            <IonLabel>
              <h5>Han</h5>
              <h6>Look, kid...</h6>
              <p>I've got enough on my plate as it is, and I...</p>
            </IonLabel>
          </IonItem>
        </IonList>

标签： ionic-frameworkionic-react

解决方案

IonItem 格式有些固定。如果您想使用它，我建议您将方法更改为以下内容：

      <IonList>
          <IonItem>
            <IonThumbnail slot="start">
              <IonSlides options={slideOptsOne}>
                <IonSlide>
                  <IonImg alt="logo" src="..." />
                </IonSlide>
                <IonSlide>
                <IonImg alt="logo"  src="..." />
                </IonSlide>
              </IonSlides>
            </IonThumbnail>
            
            <IonLabel>
              <p>Finn</p>
              <p>I'm a big deal</p>
            </IonLabel>
          </IonItem>

          <IonItem>
            ...
          </IonItem>
        </IonList>

推荐阅读