@{
    IEnumerable<dynamic> dataList = Model;
    string templateDirectory = ViewBag.TemplateDirectory;
}
<link rel="stylesheet" href="@templateDirectory/Incs/dist/css/swiper.min.css">
<script src="@templateDirectory/Incs/dist/js/swiper.min.js"></script>
<style>
.swiper-container {width: 100%;height: 300px;margin-left: auto;margin-right: auto;}
.swiper-slide {background-size: cover;background-position: center;}
.gallery-top {height: 80%;width: 100%;}
.gallery-top .swiper-wrapper,
.gallery-top .swiper-slide{background:#EEE;}
.gallery-top .swiper-slide img{display:block;margin:0px auto;}
.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-thumb-active {opacity: 1;}
</style>

<!-- Swiper -->
<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>
@if (dataList.Count()>1)
{
<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>
}

<!-- Swiper JS -->
<!-- Initialize Swiper -->
<script>
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        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
        }
    });
</script>
