1

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

4

3 回答 3

0

响应式网格视图在这里对我来说很好用 

<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>

于 2018-03-17T09:41:01.003 回答
0

在 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>
   )
}
于 2020-08-04T09:39:46.133 回答
0

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

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

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

于 2018-02-20T06:50:52.597 回答