Carousel with pause in Bootstrap

How to set pause to carousel images using javascript and data-attibutes in Bootstrap?

Carousel with pause function

We can make the function pause using data attributes and javascript, pause function makes the sliding images stop when the hover is placed on the images.

Pause with javascript

We can set the function pause using data-pause="Hover", pause function makes the sliding images stop when the hover is placed on the images.

 <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 70%;
            margin: auto;
        }
    </style>
</head>
<body>

    <div class="container">
     <h2>Bootstrap </h2>
        <div id="myCarousel" class="carousel slide">
            
            <ol class="carousel-indicators">
                <li class="item1 active"></li>
                <li class="item2"></li>
                <li class="item3"></li>
                <li class="item4"></li>
            </ol>

            
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="apple-01.jpg" height="200" width="100" />
                </div>

                <div class="item">
                    <img src="download.jpg" height="200" width="100" />
                </div>

                <div class="item">
                    <img src="images%20(1).jpg" height="200" width="100" />
                </div>

                <div class="item">
                    <img src="images.jpg" height="200" width="100" />
                </div>
            </div>

            
            <a class="left carousel-control" href="#myCarousel" role="button">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <script>
        $(document).ready(function () {
           
            $("#myCarousel").carousel({ interval: 500, pause: "hover" });

            $(".item1").click(function () {
                $("#myCarousel").carousel(0);
            });
            $(".item2").click(function () {
                $("#myCarousel").carousel(1);
            });
            $(".item3").click(function () {
                $("#myCarousel").carousel(2);
            });
            $(".item4").click(function () {
                $("#myCarousel").carousel(3);
            });

            
            $(".left").click(function () {
                $("#myCarousel").carousel("prev");
            });
            $(".right").click(function () {
                $("#myCarousel").carousel("next");
            });
        });
    </script>
</body>

In the above code snippet we have defined the carousel to slide the image and we are settinginterval and pause as hover to slide in the given time , we use data-interval to slide the image in given time interval
In the first step we have taken then div section with class value container and we have another div section in the same div section with class value carousel slide and id as #mycarousel , data-ride as carousel which is used to activate the carousel and data-interval value as 500, and pause as hover we have defined the list values using <ol> elements with class value carousel-indicators using list values data-target #mycarousel and data-slide-to slides the given slide
In the next step we have div section with the class value carousel-inner to define the images to slide the images by using div section with class value item
After creating the images to slide, we have created the links to slide the images by giving the class value left carousel control and right carousel control

output

Pause with data-attribute

We can use data-attibute to make function pause, pause function makes the sliding images stop when the hover is placed on the images

  <style>
        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            width: 70%;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container">
       <h2>Carousel pause function using data-attributre</h2>
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="500" data-pause="hover">            
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>            
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="apple-01.jpg" height="200" width="100"/>
                </div>
                <div class="item">
                    <img src="download.jpg" height="200" width="100"/>
                </div>
                <div class="item">
                    <img src="images%20(1).jpg"  height="200" width="100"/>
                </div>
                <div class="item">
                    <img src="images.jpg"  height="200" width="100"/>
                </div>
            </div>      
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</body>

Pause function with data-attribute

In the above code snippet we have defined the carousel with pause function using data-attribute as data-pause as Hover
In the body section we have div element with class value container and we have defined the div with id as mycarousel and class value as carousel slide , data-pause as hover
In the next line we have the <ol> element to define the list values using class value class-indicators
In the next line we have defined the div element with class value carousel-inner to define the images
In the last step we have defined the carousel left and right symbols using class value left carousel and right carousel