Блог

привет, ребята, у меня есть карусель начальной загрузки, где я блокирую разные ползунки в соответствии с проверенным вводом, и она работает с изменением ползунков, но когда я вхожу во второй или третий ползунок, карусель перестает двигаться. код: css:

  #f1 {
            display: block;
        }

        #f2 {
            display: none;
        }

        #f3 {
            display: none;
        }
 

HTML:

 <input type="radio" id="a" name="e" value="a" checked>
    <input type="radio" id="b" name="e" value="b">
    <input type="radio" id="c" name="e" value="c">
    <label for="a">a</label>
    <label for="b">b</label>
    <label for="c">c</label>

    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner c" id="f1">
            <div class="carousel-item active">

                a
            </div>
            <div class="carousel-item">

                b
            </div>

        </div>

        <div class="carousel-inner d" id="f2">
            <div class="carousel-item active">
                b
            </div>
            <div class="carousel-item">

                c
            </div>


        </div>
        <div class="carousel-inner d" id="f3">
            <div class="carousel-item active">
                c
            </div>
            <div class="carousel-item">
                d
            </div>

        </div>
 

JS:

 <script type="text/javascript">


        $('input[type=radio][name=e]').change(function () {

            if (this.value == 'a') {
                $("#f2").css("display", "none");
                $("#f3").css("display", "none");
                $("#f1").css("display", "block");
            }
            else if (this.value == 'b') {
                $("#f1").css("display", "none");
                $("#f3").css("display", "none");
                $("#f2").css("display", "block");
                // alert("Transfer Thai Gayo");
            }
            else if (this.value == 'c') {
                $("#f1").css("display", "none");
                $("#f3").css("display", "block");
                $("#f2").css("display", "none");
                // alert("Transfer Thai Gayo");
            }
        });
    </script>
 

Сначала я беру карусель из начальной ЗАГРУЗКИ, чем создаю другую внутреннюю карусель, чем создаю флажки, у которых другой идентификатор, но одно и то же имя. для того, чтобы не проверять оба одновременно, я использую класс внизу в JQUERY и проверяю, чтобы они не проверялись одновременно. Наконец, с помощью CSS я отображаю каждую внутреннюю карусель в соответствии с установленным флажком, но почему-то это не работает
, как я могу решить?

Спасибо.