Jak poprawnie zaprogramować zapętlony selektor zdjęć?

Mam problem z swiperem na stronie produktu mojego projektu. Nie działa nieskończona pętla - po kolejnych klikach na następne zdjęcie w galerii miniaturek pokazują się puste miejsca itd. Ktoś coś?

Klikając strzałkę w górę zachowanie jest poprawne, natomiast klikając w dolną strzałkę, czy też w kolejne produkty pojawia się powyższy błąd.

Kod w kolejnym poście

Pokaż kod.

HTML

   <div class="product-main-top-left">
     <div class="product-swiper">
       <div class="swiper-container product-swiper-slider">
         <div class="swiper-wrapper">
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
         </div>
         <div class="swiper-button-prev"></div>
         <div class="swiper-button-next"></div>
       </div>
       <div class="swiper-container product-swiper-thumbs">
         <div class="swiper-wrapper">
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
           <div class="swiper-slide">
             <img src="./assets/product-page/main_pen.jpg" alt="">
           </div>
         </div>
       </div>
     </div>
   </div>

SCSS

   .product-main-top-left {
            width: 55%;
            overflow: hidden;
            .product-swiper {
                position: relative;
                display: flex;
                z-index: 0;
                width: 100%;
                height: 610px;
                .product-swiper-thumbs {
                    display: flex;
                    order: 1;
                    width: auto;
                    height: 610px;
                    margin-right: 0;
                    margin-top: 48px !important;
                    .swiper-slide {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                        cursor: pointer;
                        width: 120px !important;
                        height: 120px !important;
                        &.swiper-slide-active {
                            img {
                                border: 1px solid #83C000;
                            }
                        }
                        img {
                            width: 80%;
                            height: 80%;
                            padding: 10px;
                            border: 1px solid #D9D9D9;
                            border-radius: 8px;
                            object-fit: cover;
                            user-select: none;
                            background-color: #FFFFFF;
                            &:hover {
                                border: 1px solid #83C000;
                            }
                        }
                    }
                }
                .product-swiper-slider {
                    display: flex;
                    order: 2;
                    height: 710px;
                    margin-top: 16px;
                    overflow: hidden;
                    .swiper-slide {
                        display: flex;
                        align-items: flex-start;
                        justify-content: center;
                        box-sizing: border-box;
                        img {
                            width: 80%;
                            height: 80%;
                            padding: 10px;
                            border: 1px solid #D9D9D9;
                            border-radius: 8px;
                            object-fit: cover;
                            user-select: none;
                            background-color: #FFFFFF;
                        }
                    }
                    .swiper-button-prev {
                        position: absolute;
                        top: 40px;
                        left: 40px;
                        width: 44px;
                        height: 16px;
                        &::after {
                            background: url('./../assets/product-page/product-prev-btn.svg') no-repeat !important;
                            font-size: 0 !important;
                            width: 44px;
                            height: 16px;
                            background-size: contain !important;
                        }
                    }
                    .swiper-button-next {
                        position: absolute;
                        top: unset;
                        bottom: 24px;
                        left: 40px;
                        width: 44px;
                        height: 16px;
                        transform: rotate(180deg);
                        &::after {
                            background: url('./../assets/product-page/product-prev-btn.svg') no-repeat !important;
                            font-size: 0 !important;
                            width: 44px;
                            height: 16px;
                            background-size: contain !important;
                        }
                    }
                }
            }   

JS

const slider2 = new Swiper ('.product-swiper-slider', {
  slidesPerView: 1,  
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

const thumbs = new Swiper ('.product-swiper-thumbs', {
  direction: 'vertical',
  slidesPerView: 4,
  slideToClickedSlide: true,
  spaceBetween: 10,
  freeMode: true,
  watchSlidesProgress: true,
  ClickAble: true,
  loop: true,
});

slider2.controller.control = thumbs;
thumbs.controller.control = slider2;

A ten Swiper to co?

Riddle napisał(a):

A ten Swiper to co?

Powszechnie używany Slider na froncie https://swiperjs.com/

Do poprawnego działania trzeba dodać JS i CSS od Swipera
https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.3.2/swiper-bundle.js
https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.3.2/swiper-bundle.css

Z dokumentacji loop:

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be >= slidesPerView * 2

Tam masz 7 miniaturek, a 4 slidesPerView.

overcq napisał(a):

Z dokumentacji loop:

Because of nature of how the loop mode works (it will rearrange slides), total number of slides must be >= slidesPerView * 2

Tam masz 7 miniaturek, a 4 slidesPerView.

Dzięki, wlasnie wczytuję się w docsy i znajdę odpowiednie rozwiązanie. Także temat wyczerpany