Uninterrupted Carousel Experience in Bootstrap 4 (Seamless slide transition)

I'm having trouble figuring out how to make a carousel run continuously without pauses between slides. Here's an example of what I'm working with on codeply: 

.carousel-img-small {
  width: 80px;
  height: 80px;
  margin-right: 2%;
}

.carousel-inner .carousel-item {
  transition: -webkit-transform -2s ease;
  transition: transform 3s ease;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container-fluid" style="height: 62%">
  <div class="row justify-content-center h-100">
    <div class="col-md-1" style="background-color: yellow"></div>
    <div class="col-md-10 text-center" style="background-color: black;">
    </div>
    <div class="col-md-1"></div>

    <div class="col-md-1"></div>
    <div class="col-md-10 my-auto" style="background-color: yellow">
      <div id="demo" class="carousel slide" data-ride="carousel" data-interval="1" style="margin-right: 0; margin-left: 0;">

        <!-- Indicators -->
        <!--
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
-->
        <!-- The slideshow -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img class="carousel-img-small" src="https://www.freepnglogos.com/uploads/eagle-png-logo/lakes-eagles-png-logo-14.png" alt="Chicago">
          </div>

          <div class="carousel-item">
            <img class="carousel-img-small" src="https://www.freepnglogos.com/uploads/eagle-png-logo/lakes-eagles-png-logo-14.png" alt="Chicago">
          </div>
        </div>

        <!-- Left and right controls -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
          <span class="carousel-control-next-icon"></span>
        </a>

      </div>


    </div>
    <div class="col-md-1"></div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="beced1cecedbcc90d4cdfe8f908f88908e">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Although I've managed to slow down the transition, I can't seem to eliminate the pauses between slides.

I would truly appreciate any guidance or advice on how to achieve this. Thank you!

htmlcssbootstrap-4

Answer №1

If you want to make a modification, try switching the code to:

.carousel-inner .carousel-item {
  transition: -webkit-transform -2s ease;
  transition: transform 4s ease-in-out;
}

Instead of:

.carousel-inner .carousel-item {
  transition: -webkit-transform -2s ease;
  transition: transform 3s ease-out;
}

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

Dynamic input fields with autocomplete functionality

I have attempted to implement the solutions provided elsewhere on this specific issue, but unfortunately they do not seem to be working for me. It is highly probable that I am making some mistake in my approach... My main objective is to achieve what is me ...

jqueryhtml

When using $.post along with serialize, the post variables and values fail to be sent

I am trying to use jQuery to post data to process.php and then display everything that occurs in the processing file. Currently, I have successfully loaded the file using ajax. For example, when I type echo "Hello world!"; it returns Hello world! Howeve ...

phpjqueryhtmlajax

What is the proper way to retrieve the JSON data?

How can I retrieve data from another table to use in a detail view if the value returned by the getData method is null? <th data-field="id" data-detail-formatter="DetailFormatter">ID</th> <th data-field="prefix&quo ...

javascripthtmljquerybootstrap-4bootstrap-table

What is the best way to incorporate a rectangle or arrow into my canvas design?

Looking for a way to enhance my html canvas wind direction code, here is how it currently looks: var x, y, r, ctx, radians; ctx = window.compass.getContext("2d"); radians = 0.0174533 * (10 - 90); x = ctx.canvas.width / 2; y = ctx.canvas.height / ...

javascripthtmlcanvas

Creating a sidebar that overlaps the footer with CSS

Is there a way to make my sidebar overlap the footer? I attempted using position:absolute without success. .sidebar-menu { list-style: none; margin: 0; padding: 0; } element.style { padding-bottom: 25px; } .main-footer { background: #fff; padding: 15p ...

htmlcss

Exploring IP geolocation integration within Rails 3

I am looking to add a dynamic feature to my homepage that will display the location object closest to the reader's physical location. Currently, I have a Location model with longitude and latitude fields. My goal is to retrieve the location model obj ...

javascriptajaxruby-on-rails-3htmlgeolocation

Click on a button to send the React Router path as a parameter in

I've got a React form with a submission button like this: <Link className="btn btn-secondary btn-width-200 search-submit" to={{pathname: '/booking/search', query: this.state.filters}}> Search </Link> Within the ...

javascripthtmlreactjsurl-routing

Switching back and forth between JQuery and CSS display changes

My challenge involves utilizing a JQuery file to present one question at a time in a quiz format. Upon clicking the submit button, the intention is to progress to the subsequent question. However, I have encountered an issue where the transition occurs mom ...

jqueryhtmlcss

Exploring Angular 2 Tabs: Navigating Through Child Components

Recently, I've been experimenting with trying to access the HTML elements within tabs components using an example from the Angular 2 docs. You can view the example here. Here is a snippet of my implementation: import {Component, ElementRef, Inj ...

javascripthtmltypescriptangularangular2-template

Minor Chrome compatibility problems with CSS alignment

As someone who is new to stackoverflow, I've always found it to be a valuable resource for answers. I've had success building HTML 5 banner ads using GSAP (Greensock Animation Platform) in the past, but now I'm facing a CSS alignment issue t ...

javascripthtmlcssgoogle-chromefirefox

Django is refusing to display my CSS and JavaScript files - static files

Within my code in settings.py, I define the static URL like so: STATIC_ROOT = os.path.join(BASE_DIR, "static") STATIC_URL = '/static/' The location of my static files and folders is at /home/myLinuxUsername/myApp/static/interactive-preview-depe ...

pythonhtmlcssdjango

Meteor chat platform now offers the option to create multiple chat rooms

I've been working on an application that features multiple chat rooms. Currently, one of the rooms is functional in terms of sending and receiving messages. However, when I navigate to a different room and try to send a message, the message doesn&apos ...

javascripthtmlmeteorchat

Steps for deactivating the submit button once confirming the presence of the username and email

When using AJAX to verify the existence of an email or username in the database, I want to deactivate the submit button if either one (or both) already exist. Currently, I have successfully changed the input border color but I am facing a challenge with t ...

javascriptjqueryhtmlajax

A fresh javascript HTML element does not adhere to the css guidelines

While attempting to dynamically add rows to a table using Javascript and jQuery, I encountered an issue. Here is my code: <script> $(document).ready(function(){ for (i=0; i<myvar.length; i++){ $("#items").after('<tr class="item- ...

javascriptjqueryhtmlcss

Tips for incorporating a local image using file:// in JavaFX WebKit

I am facing an issue with displaying a picture in a JavaFX webview using local HTML. Despite writing the code, I am unable to show the image. The URL of the image is "file:/D:/a.jpg". //Main WebViewBrowser.java public class WebViewBrowser extends Appli ...

javahtmljavafxwebkit

Similar to the :has() in jQuery, the equivalent in CSS

Consider the code snippet below: <div class="section"> <div class="row">...</div> <div class="row"> <!-- bottom margin here needs to be 0 --> <div class="section"> &l ...

csscss-selectorsparent

Investigate the dynamic form validation using jQuery

I have set up an input field using jQuery. When the button "add a step" is clicked, jQuery will generate the following structure in the div all_steps: <div class="step"> <div class="header_step">Step '+ (x + 1) +' of the Tutoria ...

javascriptjqueryhtml

Reveal and Conceal, the ever-changing show

As I work on my blog, I want to make the layout more compact by having a link that reveals comments and entry forms when clicked. I've seen this feature on other sites as "Comments (5)", but I'm unsure how to implement it myself. Below is a snip ...

phpjavascripthtmlcommentsshow-hide

Default Documents on Login.aspx are being displayed even though it hasn't been specified in the web.config file

When I decided to move my website from the built-in web server (Cassini) to IIS, I encountered an issue with my Login.aspx page. The web.config file was showing an error "The requested page cannot be accessed because the related configuration data for the ...

asp.netdefaulthtml

Having trouble locating an element with Xpath using Selenium Web Driver? Any suggestions for a more efficient way to find this elusive element?

Selenium Web Driver- I'm having trouble locating an element using Xpath. Any suggestions on a better way to locate the element below? <div class="gwt-Label">Declined</div> I attempted to retrieve the text in the element using the followi ...

cssxpathselenium-webdriver