效果图如下:
index.html
<article>
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/pexels-photo-1110477@3x.png" alt=""></div>
<div class="swiper-slide"><img src="images/pexels-photo-1110477@3x.png" alt=""></div>
<div class="swiper-slide"><img src="images/pexels-photo-1110477@3x.png" alt=""></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-h"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide1">
<img src="images/pexels-photo-1130847@2x.png" alt="">
</div>
<div class="swiper-slide">
<img src="images/pexels-photo-1130847@2x.png" alt="">
</div>
<div class="swiper-slide">
<img src="images/pexels-photo-1130847@2x.png" alt="">
</div>
</div>
</div>
</article>
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 3,
slidesPerView: 3,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 3,
autoplay:{
delay:2500,
disableOnInteraction:false,
},//自动轮播
pagination: {
el: '.swiper-pagination-h',
clickable: true,
},
thumbs: {
swiper: galleryThumbs,
}
});
</script>
index.css
article{
width: 70%;
/*height: 100%;*/
margin: 0 auto;
margin-top: 50px;
/*position: relative;*/
height: 100%;
}
.gallery-top {
width: 100%;
/*height: 300px;*/
margin-left: auto;
margin-right: auto;
position: relative;
}
.gallery-top img{
width: 100%;
height: 100%;
}
.gallery-thumbs{
width: 50%;
margin: 0 auto;
/*background: green;*/
}
.gallery-thumbs .swiper-wrapper .swiper-slide {
width:30% !important;
height: auto;
float: left;
margin-left: 3%;
margin-right: 0 !important;
margin-top: 20px;
border: 2px solid #009CFF ;
position: relative;
/*background: red;*/
}
.swiper-slide1{
margin-left: 0 !important;
}
.gallery-thumbs .swiper-wrapper .swiper-slide img{
width: 100%;
height: 100%;
}
.active{
display: block;
}
.gallery-thumbs .swiper-slide-thumb-active:after{
content: '';
width: 0px;
height: 10px;
display: block;
position:absolute;
top: -24px;
left:46%;
/*margin: -22px auto;*/
border-width: 0px 12px 12px;
border-style: solid;
border-color: transparent transparent #009CFF;
}
在header中引入css和js。切记,引入swiper的css和js的文件