Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calling Bootstrap Carousel Methods via jQuery</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script> $(document).ready(function(){ // Don't cycle carousel to next when it isn't visible $("#myCarousel").carousel("nextWhenVisible"); // Cycles through the carousel items $("#startSlide").click(function(){ $("#myCarousel").carousel("cycle"); }); // Stops the carousel $("#pauseSlide").click(function(){ $("#myCarousel").carousel("pause"); }); // Cycles to the previous item $("#prevSlide").click(function(){ $("#myCarousel").carousel("prev"); }); // Cycles to the next item $("#nextSlide").click(function(){ $("#myCarousel").carousel("next"); }); // Cycles the carousel to first slide $("#slideOne").click(function(){ $("#myCarousel").carousel(0); }); // Cycles the carousel to second slide $("#slideTwo").click(function(){ $("#myCarousel").carousel(1); }); // Cycles the carousel to third slide $("#slideThree").click(function(){ $("#myCarousel").carousel(2); }); }); </script> <style> /* Custom style to prevent carousel from being distorted if for some reason image doesn't load */ .carousel-item{ min-height: 280px; } </style> </head> <body> <div class="container-lg my-3"> <!-- Carousel without any controls --> <div id="myCarousel" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="/examples/images/slide1.png" class="d-block w-100" alt="Slide 1"> </div> <div class="carousel-item"> <img src="/examples/images/slide2.png" class="d-block w-100" alt="Slide 2"> </div> <div class="carousel-item"> <img src="/examples/images/slide3.png" class="d-block w-100" alt="Slide 3"> </div> </div> </div> <!-- Carousel controls buttons --> <div class="text-center mt-4"> <button type="button" class="btn btn-secondary" id="startSlide">Start</button> <button type="button" class="btn btn-secondary" id="pauseSlide">Pause</button> <button type="button" class="btn btn-secondary" id="prevSlide">Previous</button> <button type="button" class="btn btn-secondary" id="nextSlide">Next</button> <button type="button" class="btn btn-secondary" id="slideOne">Slide 1</button> <button type="button" class="btn btn-secondary" id="slideTwo">Slide 2</button> <button type="button" class="btn btn-secondary" id="slideThree">Slide 3</button> </div> </div> </body> </html>
