How can i fix bootstrap carousel with mouseenter and mouse leave

Question

i have tried to create a bootstrap carousel, that is when mouseenter it slide and when mouseleave it stop. it working but i want when i leave mouse from the image it will be show the first image.please help me how can i do this?

  <script type="text/javascript"> $(".carousel-prdt").on("mouseenter",function() { $(this).carousel('cycle'); }).on("mouseleave", function() { $(this).carousel('pause'); }); </script> 

 <div class="container"> <div id="" class="carousel-prdt slide carousel-fade" data-pause="true" data-interval="2000">` <div class="carousel-inner"> <div class="carousel-item active"> <div class="prdt-img"> <img src="img/multislide-2.jpg" class="d-block w-100" alt=""> </div> </div> <div class="carousel-item"> <div class="prdt-img"> <img src="img/multislide-3.jpg" class="d-block w-100" alt=""> </div> </div> <div class="carousel-item"> <div class="prdt-img"> <img src="img/multislide-4.jpg" class="d-block w-100" alt=""> </div> </div> </div> </div> </div> 

Answer 1

but i want when i leave mouse from the image it will be show the first image

On the mouseleave event you can set the current slide using the index of the slides--zero (0) in this case being the first slide.

Also, in a snippet, you do not need to add the <script> tag to the JavaScript panel section.

Select Run code snippet to try it out below.

 $(".carousel-prdt").on("mouseenter", function() { $(this).carousel('cycle'); }).on("mouseleave", function() { // go to first slide (zero index) $(this).carousel(0); $(this).carousel('pause'); }); 

 img { width: 100%; height: 150px; cursor: pointer; } .carousel-item:nth-child(1) { background-color: red; } .carousel-item:nth-child(2) { background-color: blue; } .carousel-item:nth-child(3) { background-color: green; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="container"> <div id="" class="carousel-prdt slide carousel-fade" data-pause="true" data-interval="2000"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="prdt-img"> <img src="img/multislide-2.jpg" class="d-block w-100" alt=""> </div> </div> <div class="carousel-item"> <div class="prdt-img"> <img src="img/multislide-3.jpg" class="d-block w-100" alt=""> </div> </div> <div class="carousel-item"> <div class="prdt-img"> <img src="img/multislide-4.jpg" class="d-block w-100" alt=""> </div> </div> </div> </div> </div>