How to implement multiple swiper sliders on a page and set them to change via input type=radio?

Question

css

The page will display several galleries. The code is provided below, there is a link . At the moment, the slider is changed only in the last block. How to implement in all?

<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

are changing

label.error, .b-select:focus~.b-form__placeholder, .b-select.b-input_not-empty~.b-form__placeholder, .b-select.valid~.b-form__placeholder {
  font-size: 11px;
  top: 4px;
  font-family: 'MCW XX Light Regular';
}

Answer 2

google => "input floating labels"

Answer 3

every iteration you overwrite the gallerySlider variable so only works on the last one
add const/let

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