How to use Bootstrap and jQuery In Bootstrap

Using Vanilla JavaScript

For creating a fixed sliding carousel in Bootstrap 5 using jQuery, using the carousel component. Verify the accuracy of the Bootstrap and jQuery CDN links. Customize carousel items, add images, and style controls. Use jQuery for carousel activation, manual sliding, and hover-based pause/cycle functionality. jQuery is used to activate the carousel, enable manual sliding on item click, and pause/resume on hover. The navigation controls are customized with black backgrounds and rounded circles.

Example: Illustration of fixing sliding Carousel in Bootstrap 5 using jQuery.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
          "width=device-width, initial-scale=1"> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet"> 
    <title>Fixed Sliding Carousel</title> 
</head> 
  
<body> 
  
    <div class="container mt-5"> 
        <div id="myCarousel" 
             class="carousel slide" 
             data-bs-ride="carousel"> 
            <div class="carousel-inner"> 
                <div class="carousel-item active  h-90"> 
                    <img src= 
"https://media.w3wiki.org/wp-content/uploads/w3wiki-9.png"
                         class="d-block w-100" 
                         alt="slide 1"> 
                </div> 
                <div class="carousel-item  h-90"> 
                    <img src= 
"https://media.w3wiki.org/wp-content/uploads/20190918234528/colorize1.png"
                        class="d-block w-100" 
                        alt="slide 2"> 
                </div> 
                <div class="carousel-item  h-90"> 
                    <img src= 
"https://media.w3wiki.org/wp-content/uploads/20190918234815/colorize2.png"
                        class="d-block w-100" 
                        alt="slide 3"> 
                </div> 
            </div> 
            <button class="carousel-control-prev" 
                    type="button" 
                    data-bs-target="#myCarousel" 
                    data-bs-slide="prev"> 
                <span class="carousel-control-prev-icon  
                             bg-black rounded-circle"  
                      aria-hidden="true"> 
                </span> 
                <span class="visually-hidden"> 
                    Previous 
                </span> 
            </button> 
            <button class="carousel-control-next" 
                    type="button" 
                    data-bs-target="#myCarousel" 
                    data-bs-slide="next"> 
                <span class="carousel-control-next-icon  
                             bg-black rounded-circle"  
                      aria-hidden="true"> 
                </span> 
                <span class="visually-hidden"> 
                    Next 
                </span> 
            </button> 
        </div> 
    </div> 
  
    <script src= 
"https://code.jquery.com/jquery-3.6.4.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> 
    </script> 
  
    <script> 
  
        // Activate Carousel 
        $('#myCarousel').carousel(); 
  
        // Enable Carousel Indicators 
        $('.carousel-item').click(function () { 
            $('#myCarousel').carousel($(this) 
                            .index()); 
        }); 
  
        // Pause the carousel when the mouse is over it 
        $('#myCarousel').hover(function () { 
            $(this).carousel('pause'); 
        }, function () { 
            $(this).carousel('cycle'); 
        }); 
    </script> 
  
</body> 
  
</html>

Output:

How to fix sliding Carousel in Bootstrap 5 ?

In Bootstrap 5, a Sliding Carousel is a dynamic component that displays a series of images or content sequentially. It enables a visually appealing, automatic, or user-triggered transition between slides. Users can navigate through the slides using controls, creating an interactive and engaging content display.

Table of Content