如何使离子滑动响应？答案

【问题标题】：How to make ion-slide responsive?如何使离子滑动响应？
【发布时间】：2018-07-30 11:07:18
【问题描述】：

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

【问题讨论】：

分享你到目前为止所尝试的。
请提供一些额外的数据..

【解决方案1】：

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

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

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

【讨论】：

看起来变化不大

【解决方案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>

【讨论】：

【解决方案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>
   )
}

【讨论】：