CODEWITHSUNDEEP
htmlcssbootstrap-5bootstrap-carousel
AmPhIbIaN26
AmPhIbIaN26

Reputation: 11

Bootstrap indicators and slide controls not working

I am using this as a way to learn how to make carousel with thumbnails, I am doing exactly what they have done(or I think I have) but clicking on thumbnails is not working and neither are the indicators. The only thing I have changed is the cdn for bootstrap using a new version. I tried using other cdn as well but can't seem to get it working.

    <!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
        <title>Hello, world!</title>
      </head>
      <body>
        <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
                    <!-- slides -->
                    <div class="carousel-inner">
                        <div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
                        <div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
                        <div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
                        <div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
                    </div> <!-- Left right --> <a class="carousel-control-prev" href="#custCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#custCarousel" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> <!-- Thumbnails -->
                    <ol class="carousel-indicators list-inline">
                        <li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
                        <li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
                        <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
                        <li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <style>
    body {
        background-color: #7B1FA2
    }
    
    .container {
        margin-top: 100px;
        margin-bottom: 100px
    }
    
    .carousel-inner img {
        width: 100%;
        height: 100%
    }
    
    #custCarousel .carousel-indicators {
        position: static;
        margin-top: 20px
    }
    
    #custCarousel .carousel-indicators>li {
        width: 100px
    }
    
    #custCarousel .carousel-indicators li img {
        display: block;
        opacity: 0.5
    }
    
    #custCarousel .carousel-indicators li.active img {
        opacity: 1
    }
    
    #custCarousel .carousel-indicators li:hover img {
        opacity: 0.75
    }
    
    .carousel-item img {
        width: 80%
    }
    </style>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/boosted/5.1.3/js/boosted.bundle.min.js" integrity="sha512-m4KgsHOciE4s/A5Z1xqQDBmWy/pKpI8RbrsX6r/vl6L/NZ/P2PHtleVfOa3ChD1JBBfyqTFbnCJbcLGTis4QLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      </body>
    </html>

Upvotes: 0

Views: 107

Answers (2)

AmPhIbIaN26
AmPhIbIaN26

Reputation: 11

Figured it. I was using old bootstrap syntax data-slide-to instead of data-bs-slide-to.

Upvotes: 1

Rasmus Lauridsen
Rasmus Lauridsen

Reputation: 133

Your error seems to be something with the JS not loading correctly. In the bottom of your code, you are using the wrong JS "Boosted" instead of Bootstrap.

<script src="https://cdnjs.cloudflare.com/ajax/libs/boosted/5.1.3/js/boosted.bundle.min.js" integrity="sha512-m4KgsHOciE4s/A5Z1xqQDBmWy/pKpI8RbrsX6r/vl6L/NZ/P2PHtleVfOa3ChD1JBBfyqTFbnCJbcLGTis4QLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Replace that tag with the correct Bootstrap JS from a CDN like this:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Upvotes: 0

Related Questions