{% load static %}
<style>
    swiper-container {
        width: 100%;
        height: 100%;
    }

    swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    swiper-container {
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .mySwiper {
        height: 80%;
        width: 100%;
    }

    .mySwiper2 {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }

    .mySwiper2 swiper-slide {
        width: 25%;
        height: 100%;
        opacity: 0.4;
    }

    .mySwiper2 .swiper-slide-thumb-active {
        opacity: 1;
    }

    swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
<script src="{% static 'baykeshop/js/swiper-element-bundle.min.js' %}"></script>
<div class="gallery">
    <swiper-container style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="mySwiper"
        thumbs-swiper=".mySwiper2" space-between="10">
        {% for gallery in images %}
        <swiper-slide>
            <img src="{{ gallery.image.url }}" />
        </swiper-slide>
        {% endfor %}
    </swiper-container>

    <swiper-container class="mySwiper2" space-between="10" slides-per-view="4" free-mode="true"
        watch-slides-progress="true" navigation="true">
        {% for gallery in images %}
        <swiper-slide>
            <img class="bk-is-clickable" src="{{ gallery.image.url }}" />
        </swiper-slide>
        {% endfor %}
    </swiper-container> 
</div>