v2.5.2
Giriş yap

Swiper Thumbs galeri sorunu

mb
267 defa görüntülendi

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 ?

Cevap yaz
Cevaplar (1)
mb
654 gün önce

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"
            }
        });

    }