[swiper plug-in] - When entering the page, it will rotate to a certain picture by default

I use the swiper plug-in on the html page, it should be better to use vue or react

1. Implementation method

1.首先获取需要轮播的图片数组;
2.再定义一个需要默认展示的图片地址;
3.然后通过indexof获取此图片地址在图片数组的下标;
4.最后通过swiper.slideTo(index)跳转即可;

2. Code display

            var swiper1 = new Swiper('.swiper-container1', {
    
    
                pagination: {
    
    
                    el: '.swiper-pagination',
                    type: 'fraction',
                },
                // 如果需要前进后退按钮
                navigation: {
    
    
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                centeredSlides: true,
                // slidesPerView: 'auto',
                loop: false,
                spaceBetween: 10, //间距px
                observer: true, //修改swiper自己或子元素时,自动初始化swiper
                observeParents: true, //修改swiper的父元素时,自动初始化swiper
                on: {
    
    
                    slideChangeTransitionEnd: function () {
    
    
                        console.log("滑动结束");
                        console.log(swiper1, this.activeIndex)
                    },
                },
            });
            //这里开始默认显示某张图片
            // 首先获取当前轮播的所有图片(如果是vue,即在data里面定义的图片数组)
            let arr = document.getElementsByClassName('img-block')
            let url = './images/tel.png' //需要默认展示的图片地址
            let imgarr = [] //图片数组
            for (var i = 0; i < arr.length; i++) {
    
    
                imgarr.push($(arr[i]).attr('src'))
            }
            var index = imgarr.indexOf(url) //获取图片数组中需要默认展示的图片的下标
            swiper1.slideTo(index);

Guess you like

Origin blog.csdn.net/qq_45791799/article/details/128579223