回复 2楼xiyou的帖子模板页的内容是这样的,没看到限制的信息。咋整
@*内容页图片组展示模型*@
@{
IEnumerable<dynamic> dataList = Model; //传递图片组的列表集合
}
<style>
.images-box .swiper-container {width: 100%;height: 300px;margin-left: auto;margin-right: auto;}
.images-box .swiper-slide {background-size: cover;background-position: center;}
.images-box .gallery-top {height: 80%;width: 100%;}
.images-box .gallery-top .swiper-slide{background
EEE;}
.images-box .gallery-top .swiper-slide img{display:block;margin:0px auto;}
.images-box .gallery-thumbs {height:20%;box-sizing: border-box;padding: 10px 0;}
.images-box .gallery-thumbs .swiper-slide {width:25%;height: 100%;opacity: 0.4;cursor:pointer}
.images-box .gallery-thumbs .swiper-slide-thumb-active {opacity: 1;}
</style>
<!-- Swiper -->
<div class="images-box">
<div class="swiper-container gallery-top">
<div class="swiper-wrapper">
@foreach (var item in dataList)
{
<div class="swiper-slide">
<img src="@item.Path" title="@item.Name" />
</div>
}
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper-container gallery-thumbs">
<div class="swiper-wrapper">
@foreach (var item in dataList)
{
<div class="swiper-slide">
<img src="@item.Thumbnail" title="@item.Name" />
</div>
}
</div>
</div>
</div>
<!-- Swiper JS -->
<!-- Initialize Swiper -->
<script>
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView:5,
freeMode: true,
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6f2442108a9e60fa1e6be25badfd7eb6";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>