Как реализовать несколько swiper slider на странице и задать им смену через input type=radio?

Question

[awpman]

На странице будет выводится несколько галерей. Код предоставил ниже, есть ссыль. На данный момент смена слайдера осуществляется только в последнем блоке. Как реализовать во всех?

<div class="marb-15 position-relative gallery-slider-wrap" data-aos="fade-img" data-aos-once="true">
    <div class="swiper-container gallery-slider">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/example_gallery_1.jpg" class="img-fluid gallery-slider-img">
            </div>
            <div class="swiper-slide">
                <img src="img/example_gallery_2.jpg" class="img-fluid gallery-slider-img">
            </div>
            <div class="swiper-slide">
                <img src="img/example_gallery_1.jpg" class="img-fluid gallery-slider-img">
            </div>
        </div>
    </div>
    <div class="gallery-slider-nav">
        <div class="row d-inline-flex align-items-center gutters-5">
            <div class="col-auto marb-5 color-col">
                <label class="color">
                    <input type="radio" name="color" class="color-input js-color-input" checked>
                    <span class="color-round" style="background-color: #281e1a;"></span>
                </label>
            </div>
            <div class="col-auto marb-5 color-col">
                <label class="color">
                    <input type="radio" name="color" class="color-input js-color-input">
                    <span class="color-round" style="background-color: #c59344;"></span>
                </label>
            </div>
            <div class="col-auto marb-5 color-col">
                <label class="color">
                    <input type="radio" name="color" class="color-input js-color-input">
                    <span class="color-round" style="background-color: #929292;"></span>
                </label>
            </div>
        </div>
    </div>
</div>

if($(".gallery-slider-wrap").length>0){

        $('.gallery-slider-wrap').each(function() {

            let galleryBoxSlider = $(this).find('.gallery-slider'),
                galleryBoxCheck = $(this).find('.js-color-input');
                
                gallerySlider = new Swiper(galleryBoxSlider, {
                    effect: 'fade',
                    speed: 1000,
                    simulateTouch: false
                });

                galleryBoxCheck.change(function() {
                    let slideIndex = $(this).parents('.color-col').index();
                    gallerySlider.slideTo(slideIndex);
                });

        });
    }

Answer 1

[Stockholm Syndrome]

каждую итерацию вы перезаписываете переменную gallerySlider, поэтому работает только на последнем
добавьте const/let

const gallerySlider = new Swiper(galleryBoxSlider, {
  effect: 'fade',
  speed: 1000,
  simulateTouch: false
});

Comments

[awpman]

Благодарю, задача решена!