<div class="pro_section">
    <div class="pin_swiper">
        <div class="swiper-wrapper">
            {% for value in app('section').id('67303') %}
            <div class="swiper-slide">
               <img src="{{ value.img[0] }}" alt="{{ value.name }}">
            </div>
            {% endfor %}
        </div>
    </div>
   
    <div class="pin_swiper2">
        <div class="swiper-wrapper">
            {% for value in app('section').id('67303') %}
            <div class="swiper-slide">{{ value.name }}</div>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    var swiper = new Swiper(".pin_swiper2", {
        slidesPerView: 5,
        freeMode: true,
        watchSlidesProgress: true,
        breakpoints: {
            640: {
                slidesPerView: 2,
                spaceBetween: 0,
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 0,
            },
            1024: {
                slidesPerView: 4,
                spaceBetween: 0,
            },
        },

    });

    var swiper2 = new Swiper(".pin_swiper", {
        spaceBetween: 0,
        speed:800,
        thumbs: {
            swiper: swiper,
        },
    });

    $(".pin_swiper2 .swiper-slide").on("mouseenter", function() {
        var slideIndex = $(this).index();
        swiper2.slideTo(slideIndex, 800, false);
    });

</script>