swipe的基础使用（二十三）

来源：互联网发布：linux 关闭ntpdate 编辑：程序博客网时间：2024/05/18 14:24

本次内容我们介绍用swiper实现缩略图的效果。

首先搭建起俩个swiper页面，注意俩个swiper页面的外部容器当中的类名。

<div class="swiper-container gallery-top">            <div class="swiper-wrapper">                <div class="swiper-slide">H5EDU 1</div>                <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>                <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div>                <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div>            </div>        </div>

这个swiper页面为展示出的图片，也就是没有缩放过的图片。

然后开始写缩略图的swiper页面，可以把这个缩略图页面当做底部导航来使用，只不过原来的圆点变成了图片。

<div class="swiper-container gallery-thumbs">            <div class="swiper-wrapper">                <div class="swiper-slide">H5EDU 1</div>                <div class="swiper-slide" style="background-image:url(img/4.jpg)"></div>                <div class="swiper-slide" style="background-image:url(img/5.jpg)"></div>                <div class="swiper-slide" style="background-image:url(img/6.jpg)"></div>            </div>        </div>

然后到js当中初始化俩个swiper页面，并将他们进行绑定，形成缩略图效果

 var galleryTop = new Swiper('.gallery-top',{                spaceBetween:10            });                        var galleryThumbs = new Swiper('.gallery-thumbs',{                spaceBetween:10,                centeredSlides:true,                slidesPerView:'auto',                touchRatio:0.2,                slideToClickedSlide:true            });            galleryTop.params.control = galleryThumbs;            galleryThumbs.params.control = galleryTop;

这样写完之后缩略图的大小没有改变，我们需要在CSS当中自行设置

.gallery-top{                height:80%;                width:100%;            }            .gallery-thumbs{                height:20%;                box-sizing:border-box;                padding:10px 0;            }            .gallery-thumbs .swiper-slide{                width:25%;                height:100%;                opacity:0.4;            }            .gallery-thumbs .swiper-slide-active{                opacity:1;            }

这样我们的缩略图效果就制作完成了。

0 0