带有离子幻灯片的离子反应转盘

问题描述

在 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,and I...</p>
            </IonLabel>
          </IonItem>
        </IonList>

解决方法

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>