Question

我的离子应用程序有一个带有2张幻灯片的滑块，它们会根据左右滑动动作显示出来。我想让我的页面响应。在大屏幕的情况下，我想要并排显示两个幻灯片并禁用滑动操作。我怎样才能做到这一点？

Answer 1

我认为你到目前为止都想这样做

<ion-slides autoplay="5000" loop="true" speed="3000" class="full">
  <ion-slide>
    <img src="assets/img/gym.jpg" />
  </ion-slide>
</ion-slides>

此代码使用幻灯片动画自动更改图像，并且响应更快

Answer 2

响应式网格视图对我来说很正常here

<ion-content padding class="page-manhomeslider">
<ion-slides autoplay="5000" loop="false" speed="1000" (ionSlideDidChange)="slideChanged()">
<ion-slide>
    <ion-grid>
    <ion-row>
        <ion-col text-left>
            <ion-label style="color: black">1/12</ion-label> 
        </ion-col>
      </ion-row>
       <img src="assets/gif/men/1-jumping-jacks.gif" class="slide_img"/>
      <ion-row>
        <ion-col class="pageheader">
            <h2>Jumping Jacks</h2>
        </ion-col>
      </ion-row>
    <ion-footer>
      <ion-row>
        <ion-col>

        </ion-col>
          <ion-col>
            <div id="countdown">
              <div class="countdown-number"></div>
              <svg>
                <circle r="28" cx="40" cy="40"></circle>
              </svg>
            </div>
          </ion-col>
          <ion-col>
            <ion-buttons class="btnend" end>
              <button (click)="goToSlide2()" ion-button round>
               <ion-icon name="arrow-forward"></ion-icon>
              </button>
            </ion-buttons>
        </ion-col>
      </ion-row>
     </ion-footer>
    </ion-grid>
</ion-slide>

Answer 3

在React中，每当页面调整大小时，我都会使用状态来更新slidesPerView属性。

export default function ResponsiveSlides () {
   const [slideOpts, setSlideOpts] = useState ({
     initialSlide: 0,
     speed: 400,
     slidesPerView: Math.floor (window.innerWidth / 298),
     spaceBetween: 1
   });

   function changeSlideOpts (key, value) {
     setSlideOpts (
       {
         ... slideOpts,
         [key]: value
       }
     )
   }

   window.onresize = function (event) {
     changeSlideOpts ("slidesPerView", Math.floor (window.innerWidth / 298));
   };

   return (
     <IonSlides pager = {false} options = {slideOpts}>
       <IonSlide>
         <IonCard />
       </IonSlide>
       <IonSlide>
         <IonCard />
       </IonSlide>
       <IonSlide>
         <IonCard />
       </IonSlide>
       <IonSlide>
         <IonCard />
       </IonSlide>
       <IonSlide>
         <IonCard />
       </IonSlide>
       <IonSlide>
         <IonCard />
       </IonSlide>
     </IonSlides>
   )
}

如何使离子滑动响应？

3 个答案: