swiper实现图片焦点导航

image.png

引入swiper.min.js和swiper.miin.css

//大图
   <div class="swiper-container" id="gallery">
        <div class="swiper-wrapper">
               <div class="swiper-slide"><img src="${vipRight.detail}" draggable="false"></div>
        </div>
    </div>
//缩略图
<div class="swiper-container" id="thumbs">
        <div class="swiper-wrapper">
               <div class="swiper-slide"><img src="${vipRight.icon}" class="out" draggable="false"><span>${vipRight.name}</span></div>
        </div>
    </div>

//JS
var gallerySwiper = new Swiper('#gallery',{
            initialSlide :${display},//设置初始化显示的index
            spaceBetween: 10,
            slidesPerView: 1.2,
            slidesOffsetBefore : 20,
            slidesOffsetAfter : 20,
            effect: 'coverflow', //3d滑动
            centeredSlides: true,
            coverflowEffect: {
                rotate: 0,  //设置为0
                stretch: 0,
                depth: 200,
                modifier: 2,
                slideShadows : false
            },
            on: {
                slideChangeTransitionEnd: function(){

                }
            },
            thumbs: {
                swiper: {
                    el: '#thumbs',
                    spaceBetween: 10,
                    slidesPerView: 4,
                    slidesOffsetBefore : 50,
                    centeredSlides: true,
                    watchSlidesVisibility: true,/*避免出现bug*/
                    on:{

                    }
                }

            }
        })