I implemented a swiper js slider in my project and I am wondering if it is possible to change the default slide that is shown. For example, my slides are named slide1, slide2, slide3, etc. Currently, swiper js is displaying slide 1 by default, but I would like to show slide 2 by default instead. Is this achievable with swiper?
Here is my swiper configuration:
window.videoSlider = () => {
var sliderSelector = '.video-slider',
options = {
init: false,
loop: false,
speed: 800,
spaceBetween: 0,
slidesPerView: 3, // or 'auto'
centeredSlides: true,
effect: 'coverflow', // 'cube', 'fade', 'coverflow',
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 585,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".testemonial-pagination",
clickable: true,
},
grabCursor: true,
parallax: true,
navigation: {
nextEl: '.video-next',
prevEl: '.video-prev',
},
breakpoints: {
1440: {
slidesPerView: 2,
spaceBetween: 0
},
// more breakpoints...
}
};
var mySwiper = new Swiper(sliderSelector, options);
mySwiper.init();
}And here is my slider image: https://i.sstatic.net/vApoP.png
I would like to have the second slide as the default because I want users to be able to navigate both left and right from the beginning. By default, swiper only shows slide 1, restricting the user from moving right. I know I can use the loop property in swiper, but that is not what I want. Any help on achieving this would be greatly appreciated.