change slider when different checkbox is checked

Question

I was trying to have 4 different sliders in the bootstrap carousel, the I have some buttons and when someone click in a button the sliders should change according to what I have decided in CSS, but the code I've tried is not working, I link you a min version of the code that is not working, thanks.

    <style>
        .c {
            display: none;
        }

        .d {
            display: none;
        }

        #a:checked~.c {
            display: block !important;
        }

        #b:checked~.d {
            display: block !important;
        }
    </style>
</head>

<body>
    <input type="checkbox" id="a" class="check" checked>
    <input type="checkbox" id="b" class="check">
    <label for="a">a</label>
    <label for="b">b</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">
                <img src="..." class="d-block w-100" alt="...">
                a
            </div>
            <div class="carousel-item">
                <img src="..." class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="..." class="d-block w-100" alt="...">
            </div>
        </div>

        <div class="carousel-inner d" id="f2">
            <div class="carousel-item active">
                <img src="..." class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="..." class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="..." class="d-block w-100" alt="...">
            </div>
        </div>



        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
    -->
    <script>

        $(".check").click(function () {
            $(".check").prop("checked", false);
            $(this).prop("checked", true);

        });
    </script>
</body>

</html>

I'm first doing taking a carousel from BOOTSTRAP, than I'm creating another inner carousel, than I'm creating to checkboxes that have different id but same class. for don't have both checked at the same time I'm using the class in the bottom in JQUERY and checking that they are not checked at the same time. Finally with CSS I'm displaying each inner carousel according to the checkbox checked, but somehow it's not working

You should be firing `$("#carouselExampleIndicators").carousel(slidenumber);` to change the slides, not changing the CSS. Use input radios instead of checkboxes. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio . See https://stackoverflow.com/questions/13152927/how-to-use-radio-on-change-event — franklylately, Sep 17 '21 at 19:20
@mr_joncollette, thanks for the answer it really helped me, this is how I'm doing it now, it is the right way? — Sudais Virk, Sep 18 '21 at 08:53

score 0 · Answer 1 · answered Sep 18 '21 at 08:56

this is working for me it is the right way?

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <title>Hello, world!</title>
    <style>
        #f1 {
            display: block;
        }

        #f2 {
            display: none;
        }

        #f3 {
            display: none;
        }

        /* 
        #a:checked~.c {
            display: block !important;
        }

        #b:checked~.d {
            display: block !important;
        } */
    </style>
</head>

<body>
    <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>

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


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

        </div>



        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
    -->
    <!-- // $(".check").click(function () {
    //     $(".check").prop("checked", false);
    //     $(this).prop("checked", true);

    // }); -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
    <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>
</body>

</html>```

See new answer, since you're already using bootstrap's carousel, rely on the change code. — franklylately, Sep 18 '21 at 19:33

score 0 · Answer 2 · answered Sep 18 '21 at 19:33

Use $("#carouselExampleSlidesOnly").carousel(slidenumber); to change the slide. Store the selected slide as the value or data-attribute. See below.

$("input[type='radio'][name=exampleRadios]").on("change", function() {
  $("#carouselExampleSlidesOnly").carousel(parseInt($(this).val()));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="0" checked data-select="0">
  <label class="form-check-label" for="exampleRadios1">
    Slide 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="1" data-select="2">
  <label class="form-check-label" for="exampleRadios2">
    Slide 2
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="2">
  <label class="form-check-label" for="exampleRadios3">
    Slide 3
  </label>
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/1600x200" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1600x201" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/1600x202" class="d-block w-100" alt="...">
    </div>
  </div>
</div>

change slider when different checkbox is checked

2 Answers2