CODEWITHSUNDEEP
htmlcssbootstrap-4
Weyers de Lange
Weyers de Lange

Reputation: 290

Carousel stop as soon as mouse hover over it, can bootstrap be the problem? i am using bootstrap 4.1.3

Carousel stop on mouse hover i did try to set data-pause = "null" but then the hole carousel stop working. If i try to make data pause null !important the also the hole carousel stop working. i added all the necessary bootstrap and script but to no avail it still stop cascading as soon as the mouse hover over the carousel.

.carousel-item:before {
        -webkit-box-shadow: inset 0 0 20rem rgba(0, 0, 0, 1);
        box-shadow: inset 0 0 20rem rgba(0, 0, 0, 1);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
    }

    .w-100 {
      width: 100% !important;
      height: 75vh;
    }
<!DOCTYPE html>
    <html lang="en">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Bootstrap Core CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


    </head>
      <body>

           <div class="container-sm">
              <div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img class="w-100" src="https://www.w3schools.com/bootstrap/la.jpg" alt="1st slide">
                  </div>
                  <div class="carousel-item ">
                    <img class="w-100"  src="https://www.w3schools.com/bootstrap/chicago.jpg"  alt="2nd slide">
                  </div>
                  <div class="carousel-item ">
                    <img class="w-100" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="3rd slide">
                  </div>
                </div>
              </div>
            </div>


     

    </body>
      <!-- jQuery -->
        <script src="js/jquery.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
    </html>

Upvotes: 0

Views: 124

Answers (1)

Numan Abid
Numan Abid

Reputation: 56

use the term data-pause=false just as:

</head>
  <body>

       <div class="container-sm">
          <div id="carouselSlidesOnly" class="carousel slide" data-ride="carousel" data-pause="flase">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="w-100" src="https://www.w3schools.com/bootstrap/la.jpg" alt="1st slide">
              </div>
              <div class="carousel-item ">
                <img class="w-100"  src="https://www.w3schools.com/bootstrap/chicago.jpg"  alt="2nd slide">
              </div>
              <div class="carousel-item ">
                <img class="w-100" src="https://www.w3schools.com/bootstrap/ny.jpg" alt="3rd slide">
              </div>
            </div>
          </div>
        </div>


 

</body>
  <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>
</html>

Upvotes: 2

Related Questions