How to make ion-slide responsive?

Question

My ionic app has a slider with 2 slides, and they show up based on left and right swipe action. I want to make my page responsive. In case of large screen i want to show both slides side-by-side and swipe action to be disabled. How can i achieve this?

Answer 1

I think you want to do this so far

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

This code auto-change your images with the slide animation and it is more responsive also

Answer 2

Responsive grid view is working fine for me 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

In React, I used states to update the slidesPerView property whenever the page is resized.

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