Swiper Thumbs galeri sorunu
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 ?
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (1)
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"
}
});
}