How to make ion-slide responsive? - ionic-framework

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