Swiper Thumbs galeri sorunu

( ! ) Notice: session_start(): ps_files_cleanup_dir: opendir(/var/lib/php/session) failed: Permission denied (13) in /home/prototurk.com/public_html/app/init.php on line 4
Call Stack
#	Time	Memory	Function	Location
1	0.0003	363456	{main}( )	.../index.php:0
2	0.0008	367272	require( '/home/prototurk.com/public_html/app/init.php' )	.../index.php:9
3	0.0009	383784	session_start ( )	.../init.php:4

mb 801 gün önce

329 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 ?

javascript

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (1)

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

    }

#012010