The updated Bootstrap 4 carousel is only working halfway as expected when attempting to double it up, causing the scroll loop to stop functioning

Question

The updated Bootstrap 4 carousel is only working halfway as expected when attempting to double it up, causing the scroll loop to stop functioning

Discovering a fantastic carousel modification was an exciting find, which can be accessed Here. However, when attempting to place two carousels on one page, issues arose with the scrolling functionality. While I managed to make them operate on the correct Carousel, they failed to loop properly once reaching the end. Instead of smoothly cycling from 1 to 8 and back to 1, they would loop to an empty state then repopulate all slides. The goal is to resolve this seamless looping behavior.

If you want to see how a single item functioned correctly and aim to achieve the same for the double carousel setup, please refer to this link.

Please note that the malfunction only occurs when not in the single-item view (mobile view). The objective is to fix its operation when displaying three items at col-md size. To better understand the issue when running the code, ensure testing in full-screen mode to observe the problem accurately.

javascript jquery html css bootstrap-4

Answer 1

Answer №1

If you wish for your code to function across multiple carousel instances on the same page, you'll need to target only the specific instance of the carousel. To achieve this, store the current carousel in a variable (denoted as $c in the example provided below):

$c = $e.closest('.carousel-inner'),

Then, utilize this variable to restrict the jQuery selectors to the current carousel alone by replacing $(selector) with $(selector, $c):

// JavaScript Document

$('#carouselExample').on('slide.bs.carousel', modCarousel);
$('#test').on('slide.bs.carousel', modCarousel);

function modCarousel (e) {

    var $e = $(e.relatedTarget),
        idx = $e.index(),
        itemsPerSlide = 3,
        $c = $e.closest('.carousel-inner'),
        totalItems = $('.carousel-item', $c).length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item', $c).eq(i).appendTo($c);
            }
            else {
                $('.carousel-item', $c).eq(0).appendTo($c);
            }
        }
    }
};

@media (min-width: 768px) {
  /* show 3 items */
  .carousel-inner .active,
  .carousel-inner .active+.carousel-item,
  .carousel-inner .active+.carousel-item+.carousel-item {
    display: block;
  }
  ...

}

<!DOCTYPE html>
<html lang="en">

<head>
  ...
</head>

<body>

  <div class="container">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="1850">
      ...
    </div>

    <div id="test" class="carousel slide" data-ride="carousel" data-interval="2100">
      ...
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  ...
</body>

</html>

Answer 2

If you wish for your code to function across multiple carousel instances on the same page, you'll need to target only the specific instance of the carousel. To achieve this, store the current carousel in a variable (denoted as $c in the example provided below):

$c = $e.closest('.carousel-inner'),

Then, utilize this variable to restrict the jQuery selectors to the current carousel alone by replacing $(selector) with $(selector, $c):

// JavaScript Document

$('#carouselExample').on('slide.bs.carousel', modCarousel);
$('#test').on('slide.bs.carousel', modCarousel);

function modCarousel (e) {

    var $e = $(e.relatedTarget),
        idx = $e.index(),
        itemsPerSlide = 3,
        $c = $e.closest('.carousel-inner'),
        totalItems = $('.carousel-item', $c).length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item', $c).eq(i).appendTo($c);
            }
            else {
                $('.carousel-item', $c).eq(0).appendTo($c);
            }
        }
    }
};

@media (min-width: 768px) {
  /* show 3 items */
  .carousel-inner .active,
  .carousel-inner .active+.carousel-item,
  .carousel-inner .active+.carousel-item+.carousel-item {
    display: block;
  }
  ...

}

<!DOCTYPE html>
<html lang="en">

<head>
  ...
</head>

<body>

  <div class="container">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="1850">
      ...
    </div>

    <div id="test" class="carousel slide" data-ride="carousel" data-interval="2100">
      ...
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  ...
</body>

</html>

The updated Bootstrap 4 carousel is only working halfway as expected when attempting to double it up, causing the scroll loop to stop functioning

Answer №1

Similar questions

How can we minimize the data contained in JSON HTML markup?

Facing challenges in both client-side and server-side components

Establishing a PHP session variable and then initiating a redirect to a new page through the HREF method

Whenever I am building a React application, I encounter a bug that states: "node:fs:1380 const result = binding.mkdir()"

Update a variable in one component class using another component

Having trouble retrieving the necessary redirect_uri in react-facebook-login

Original: full size responsive background images without stretchRewritten: high-quality

Tips for keeping your avatar contained within a Bootstrap grid

Interactive canvas artwork featuring particles

Tips for altering the label color of an md-input-container after text has been entered

Encountering "Index not defined" error while attempting to insert data into the

Can a dynamic react component be inserted into a standalone HTML document without the need for file downloads or server support?

A guide to retrieving hyperlinks from an HTML table with Selenium

Error message triggered by Yubikey in WebAuthn Authentication API

Sending KeyValuePair or IDictionary as payload to Web Api Controller using JavaScript

Does the Android 4.3 Internet browser not support @font-face declarations?

Best practice for sending an email including both the sender's name and email address in the FROM

A guide on triggering a function when the context changes in a React application

The error message "ReferenceError: $ is not defined" is displayed within

Issue with setInterval function execution within an Angular for loop