Swiper Thumbs galeri sorunu | Cevap #12010

Merhabalar,

swiper js ile aşağıdaki kodlardaki gibi galeri oluşturuyorum. Tek bir galeri
olduğu zaman sorun olmuyor fakat. Galeriyi arttırdığım zaman kodlar
çalışmıyor ve aşapıdaki hatayı alıyorum.

    Uncaught TypeError: Cannot read properties of null (reading '$el')

HTML kısımı

    <div class="gallery">
                                <div class="swiper gallery-slider">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img src="img/urunler/gorsel-1.jpg" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="img/urunler/gorsel-2.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                                <div class="swiper mySwiperthumbs">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <img src="img/urunler/gorsel-1.jpg" alt="">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="img/urunler/gorsel-2.jpg" alt="">
                                        </div>


                                    </div>
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>

JS Kısmı

 var swiper = new Swiper(".mySwiperthumbs", {
        spaceBetween: 10,
        slidesPerView: 4,
        freeMode: true,
        navigation: {
            nextEl: ".mySwiperthumbs .swiper-button-next",
            prevEl: ".mySwiperthumbs .swiper-button-prev"
        }
    });

    var swiper2 = new Swiper(".gallery-slider", {
        spaceBetween: 10,
        thumbs: {
            swiper: swiper
        },
        navigation: {
            nextEl: ".gallery-slider .swiper-button-next",
            prevEl: ".gallery-slider .swiper-button-prev"
        }
    });

    swiper.on("slideChange", () => {
        swiper2.slideTo(swiper.activeIndex);
    });

Bu şekilde çalıştırdığımda sorunsuz çalışıyor. Fakat html kısmında 2. bir
galeri eklediğimde hata alıyorum. Neyden kaynaklı yapıyor olabilir ?

Aşağıdaki kod ile sorunu çözdüm. İhtiyacı olanlar için bırakıyorum.

      const myCustomSlider = document.querySelectorAll('.gallery-slider');
    const myCustomGalleryThumbs = document.querySelectorAll('.gallery-thumbs');

    for (i = 0; i < myCustomSlider.length; i++) {

        myCustomSlider[i].classList.add('gallery-slider-' + i);
        myCustomGalleryThumbs[i].classList.add('gallery-thumbs-' + i);

        var galleryThumbs = new Swiper('.gallery-thumbs-' + i , {
            spaceBetween: 10,
            slidesPerView: 4,
            freeMode: true,
            navigation: {
                nextEl: ".gallery-thumbs .swiper-button-next",
                prevEl: ".gallery-thumbs .swiper-button-prev"
            },
            watchSlidesVisibility: true,
            watchSlidesProgress: true,

        });

        var galleryTop = new Swiper('.gallery-slider-' + i, {
            spaceBetween: 10,
            thumbs: {
                swiper: galleryThumbs
            },
            navigation: {
                nextEl: ".gallery-slider .swiper-button-next",
                prevEl: ".gallery-slider .swiper-button-prev"
            }
        });

    }