使用了swiper插件
<div class=”gallery-box”>
<div class=”pic-panel”>
<div class=”gallery-top”>
<!–{if $pic_list}–>
<!–{foreach from=$pic_list item=pv key=pk}–>
<div class=”swiper-slide”><img class=”iframe-img” src=”<!–{$pv.pic_url}–>” /></div>
<!–{/foreach}–>
<!–{/if}–>
</div>
<div class=”swiper-button-next”></div>
<div class=”swiper-button-prev”></div>
</div>
<div class=”gallery-thumbs”>
<div class=”gallery-swiper”>
<div class=”swiper-wrapper”>
<!–{if $pic_list}–>
<!–{foreach from=$pic_list item=pv key=pk}–>
<div class=”swiper-slide”><img class=”iframe-img” src=”<!–{$pv.pic_url}–>” /></div>
<!–{/foreach}–>
<!–{/if}–>
</div>
</div>
<div class=”swiper-button-next”></div>
<div class=”swiper-button-prev”></div>
</div>
</div>
.gallery-box .gallery-top,
.gallery-box .gallery-top img{
width: 685px;
height: 400px;
}
.gallery-box .gallery-thumbs {
height: 75px;
margin-top:10px;
padding:0 34px;
position: relative;
overflow: hidden;
}
.gallery-box .gallery-thumbs img{
height: 75px;
border-radius: 8px;
width: 148px;
-o-object-fit: cover;
object-fit: cover;
}
.gallery-box .gallery-thumbs .gallery-swiper{
width: 617px;
overflow: hidden;
}
.gallery-box .gallery-thumbs .swiper-button-next,
.gallery-box .gallery-thumbs .swiper-button-prev{
top:0;
margin-top: 0;
width: 30px;
height: 100%;
color: #fff;
background: rgba(0, 0, 0, .5);
border-radius: 8px;
}
.gallery-box .gallery-thumbs .swiper-button-next{
right: 0;
}
.gallery-box .gallery-thumbs .swiper-button-prev{
left: 0;
}
.gallery-box .gallery-thumbs .swiper-button-next:after,
.gallery-box .gallery-thumbs .swiper-button-prev:after {
font-size: 18px;
}
$(function(){
// 初始化小图 Swiper
var galleryThumbs = new Swiper(‘.gallery-swiper’, {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
navigation: {
nextEl: ‘.gallery-thumbs .swiper-button-next’,
prevEl: ‘.gallery-thumbs .swiper-button-prev’,
},
});
// 初始化大图 Swiper
var galleryTop = new Swiper(‘.gallery-top’, {
loop: true,
pagination: {
el: ‘.swiper-pagination’,
clickable: true,
},
navigation: {
nextEl: ‘.swiper-button-next’,
prevEl: ‘.swiper-button-prev’,
},
thumbs: {
swiper: galleryThumbs,
},
});
})