Is it possible that Bootstrap 4.1.3 is causing the carousel to halt when the mouse hovers over it?

When I tried to set `data-pause = "null"` to make the carousel stop on mouse hover, the whole carousel stopped working. Even adding `!important` did not solve the issue. I included all the necessary Bootstrap and script files, but the problem persisted. The carousel would stop cascading as soon as the mouse hovered over it.

.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>

htmlcssbootstrap-4

Answer №1

To prevent pausing the carousel, make sure to use the attribute data-pause=false like this:

</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it best to stick with a static page size, or

While I typically design my webpages dynamically by determining the screen size and creating divs accordingly, I'm curious about the advantages of using a 'static' sizing approach (such as using pixels). Any insights on this contrasting meth ...

javascripthtmlcss

Steps to position images and text side by side in a grid layout

Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS. If anyone could provide some guidance, that would be greatly appreciated! Here is the HTML code snippet: <div class="col-sm-3" ...

javascripthtmlcssvue.jsvuejs2

Displaying PHP output within a JavaScript expression

Let's dive into a scenario involving a basic HTML document and some JavaScript that's loaded within it: <!-- doc.html --> <!doctype html> <html lang="en"> <head> <script type="text/javascript" src=" ...

phpjavascripthtml

Issue with radio button click event not triggering

Whenever I click on a radio button, I want to call a function, but for some reason, it's not working as expected. I found this fiddle that demonstrates exactly what I want, but when I implement it in my code, it doesn't work. Here's a snipp ...

javascriptjqueryhtmlicheck

Choose to show a blank option and then retain the selected value upon submission

Is there a way to have the initial selection in a dropdown list be blank and selected by default, but still preserve the selected value after submitting the form? For example: <form action="" method="post" /> <SELECT NAME="whatever" id="whatever ...

phphtmlhtml-select

Disable Chrome's default click and hold/drag image behavior

Upon using Google Chrome, I have observed a functionality where one can click and hold an image, causing a semi-transparent copy of the image to attach itself to the cursor. This allows the user to drag the image to the desktop for saving purposes. I am s ...

javascriptjqueryhtmlcssgoogle-chrome

Issue with transition not functioning properly on a rotated CSS3 element

Having a bit of trouble with my CSS class: .rotate { -webkit-transition: all 2s ease-in-out; -webkit-transform : rotateY(360deg); } When I change the rotation to 180deg and apply the class using jQuery, the div rotates instantly instead of over a 2 s ...

jquerycss

Django was unable to load the static image

Currently, my Django application is hosted on PythonAnywhere. In order to generate a PDF, I am utilizing WeasyPrint which includes an image that should be displayed in the PDF. However, within the error log, I am encountering the message "Failed to load im ...

htmldjangodjango-staticfilespythonanywhere

How to position slides in the center using react-slick

I'm having difficulty achieving vertical centering for an image in a react-slick carousel implementation. The issue can be seen here. https://codesandbox.io/s/react-slick-playground-o7dhn Here are the problems identified: Images are not centered: ...

htmlcssreactjsslick.jsreact-slick

Align the image and text vertically within the <ul> tag

I'm trying to center-align the items in the navbar. https://i.stack.imgur.com/FmDYS.png Although the image looks centered, I believe it's because its size is stretching the navbar. How can I achieve this without changing the size of the picture ...

htmlcsshtml-lists

Using dictionaries or variables to assign properties to components in Plotly Dash

When creating a dashboard in Plotly Dash, you can use HTML or HTML-like components. There are now numerous parameters that can be assigned to "Core" or HTML components, many of which may be commonly shared among components. My goal is to find a way to stor ...

pythonhtmlplotly-dash

Hover over the text to reveal an image displayed in a separate div using CSS

I'm attempting to create a website similar to this one where hovering over text reveals an image in the background. Despite trying various methods suggested here, I haven't had any success so far. The closest I've come is following this solu ...

csshovervisibilitymouseoverdisplay

Resolving Issues with Page Feature Images on Your WordPress Site

Currently enrolled in a web development course, I collaborated with my instructor to create a custom website. However, I am facing an issue where the header image appears shorter on the Resources page () and Contact page () compared to the Blog page (). De ...

phphtmlcsswordpressdynamic

Guide on incorporating a CSS animation at a particular spot within an image

I am faced with a dilemma involving two images. The first one will be used for my website, while the second one was manually created to identify fixed points. However, my issue lies in the fact that I am unsure how to incorporate my CSS animation into thes ...

javascripthtmlcss

Hide elements in hidden divs until the page is fully loaded to reduce initial page

www.prismasites.com I am creating a unique world map by using SVG DIVs shaped like Continents. Upon clicking on a continent on the world map, it conceals the world map DIV and displays the respective continent DIV with SVG. I have successfully achieved ...

jqueryhtmlcssloadhidden

Guide to triggering a popover from within another popover using jQuery

Currently, I have a situation where a popover is triggered by clicking on a button. The goal is to trigger another popover from the first popover by clicking on some content within it. If you'd like to see a demonstration, check out this JSFiddle lin ...

jqueryhtmlcss

Show the national flag in the search bar only once the specific country has been chosen

I am developing a unique custom dropdown feature for selecting countries. Here are the specific requirements: Requirement 1: The dropdown should populate with countries whose names start with the letter typed in the search box. Requirement 2: Clicking on ...

javascripthtmlcssarrays

Manipulating active classes on different divisions with JQuery

I've completed this code so far: <div class="yearly-archive"> <p> YEAR - <span class="archive-year year-active"> 2014 </span> / <span class="archive-year"> 2013 </span> / <span class="archi ...

jqueryhtmlcss

Enhancing User Experience in Bootstrap 4: Making Dropdown Parents Clickable Links

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbar ...

javascripthtmlcsstwitter-bootstrap-4

jQuery TextExt: Manage Content Height and Enable Scrollbar Functionality

I recently implemented the jQuery TextExt plugin (available at ) to create a language tagging input field, similar to how it's done on Facebook. On the whole, the plugin functions wonderfully. However, I've encountered an issue that has me stum ...

javascriptjqueryhtmlcssjquery-textext