更改幻灯片在 swiper js 中的显示方式

Question

我在我的 project.i 中使用了 swiper js 滑块需要知道我可以更改滑块的默认幻灯片还是 not.forexample 我的幻灯片是 slide1 slide2 slide3 等等在我的页面中 swiper js 显示幻灯片 1 default.i 希望默认显示 slide2。我可以通过 swiper 实现吗？

这是我的刷卡配置

window.videoSlider = () => {
    var sliderSelector = '.video-slider',
        options = {
            init: false,
            loop: false,
            speed: 800,
            spaceBetween: 0,
            slidesPerView: 3, // or 'auto'
            // spaceBetween: 10,
            centeredSlides: true,
            effect: 'coverflow', // 'cube', 'fade', 'coverflow',
            coverflowEffect: {
                rotate: 0, // Slide rotate in degrees
                stretch: 0, // Stretch space between slides (in px)
                depth: 585, // Depth offset in px (slides translate in Z axis)
                modifier: 1, // Effect multipler
                slideShadows: true, // Enables slides shadows
            },
            pagination: {
                el: ".testemonial-pagination",
                clickable: true,
            },
            grabCursor: true,
            parallax: true,

            navigation: {
                nextEl: '.video-next',
                prevEl: '.video-prev',
            },
            breakpoints: {
                1440: {
                    slidesPerView: 2,
                    spaceBetween: 0
                },
                1200: {
                    slidesPerView: 2,
                    spaceBetween: 0
                },
                992: {
                    slidesPerView: 1,
                    spaceBetween: 0
                },
                768: {
                    slidesPerView: 1,
                    spaceBetween: 0
                },
                480: {
                    slidesPerView: 1,
                    spaceBetween: 0
                },
                320: {
                    slidesPerView: 1,
                    spaceBetween: 0
                },
                1: {
                    slidesPerView: 1,
                    spaceBetween: 0
                },
            }
        };
    var mySwiper = new Swiper(sliderSelector, options);

    // Initialize slider
    mySwiper.init();
}

这是我的滑块

我想要首先显示第二张幻灯片，因为我希望我的用户可以从一开始，他就可以左右移动。（默认情况下，左右滑动器显示幻灯片 1，因此用户无法将幻灯片向右移动我知道我可以在 swiper 中使用循环属性但我不会那样做）如果有人能帮助我，我将不胜感激

Answer 1

根据documentation，你需要做的就是添加一个额外的参数initialSlide，默认为0（0-index）并设置你想要的索引，

所以你的情况是 1。

    spaceBetween: 0,
    initialSlide: 1,
    slidesPerView: 3, // or 'auto'

更改幻灯片在 swiper js 中的显示方式

Change how slides are displayed in swiper js

html

javascript

css

typescript

swiperjs