Templates/Blog/views/Model/DetailImagesModel.cshtml

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

@*内容页图片组展示模型*@
@{
    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
        }
    });