Leverage the power of Bootstrap by incorporating not one, but two carousels on a single page - one featuring a single item per

Question

Leverage the power of Bootstrap by incorporating not one, but two carousels on a single page - one featuring a single item per

I have a unique challenge with using multiple Bootstrap Carousels on my WordPress website

One of the carousels features one item per slide, while the other carousel has three items per slide, moving one item at a time in a cyclical pattern like this:

[1, 2, 3] .. [2, 3, 4] .. [3, 4, 1]

The first carousel is functioning properly, but the second carousel is encountering issues.

Instead of displaying the first item after the last one, the second carousel shows two empty items first and then has a strange "jump" in behavior (you can witness this by visiting my website linked below).

In essence, this is what occurs:

[1, 2, 3] .. [2, 3, 4] .. [3, 4, blank] .. [4, blank, blank] .. and then jumps back to the beginning .. [1, 2, 3]

Interestingly, the second carousel works perfectly when placed on a page without any other Bootstrap carousels! Therefore, the issue lies in a conflict between the two carousels.

Despite numerous searches on Google and Stack Overflow, I have not found a solution tailored to my specific scenario after hours of research.

Previous queries typically involved the use of two standard carousels, not one with a "multislider."

I have assigned unique identifiers to each of the carousels.

Explore my carousels:

Observe both carousels in action and inspect the code here: .

For a smoother experience, view the second carousel on a test page where it operates flawlessly:

javascript jquery css wordpress bootstrap-4

Answer 1

Answer №1

Although you have unique identifiers, they are not being used to initialize each carousel separately. Additionally, you are triggering the slide.bs.carousel event on #carousel-reviews, but then modifying both carousels' items within the same function, leading to unexpected behavior.

Take a look at your code:

<script>
// Stop portfolio slider from auto looping
$('.carousel').carousel({ //HERE YOU INITIATE BOTH CAROUSELS AT SAME TIME
  interval: false
})
</script>

<script>
jQuery(document).ready(function() {

    /*
        Carousel
    */
    $('#carousel-reviews').on('slide.bs.carousel', function (e) {

        var $e = $(e.relatedTarget);
        var idx = $e.index();
        var itemsPerSlide = 3;
        var totalItems = $('.carousel-item').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').eq(i).appendTo('.carousel-inner');
                }
                else {
                    $('.carousel-item').eq(0).appendTo('.carousel-inner');
                }
            }
        }
    });

});
</script>

Try initializing them separately and handling .carousel-item for each carousel individually:

<script>
    // Stop portfolio slider from auto looping
   $('#carousel-portfolio').carousel({
      interval: false
    })
    $('#carousel-reviews').carousel({ 
      interval: false
    })
    </script>

    <script>
    jQuery(document).ready(function() {

        /*
            Carousel
        */
        $('#carousel-reviews').on('slide.bs.carousel', function (e) {

            var $e = $(e.relatedTarget);
            var idx = $e.index();
            var itemsPerSlide = 3;
            //also, here, specify selection only to #carousel-reviews: 
            var carouselItems = $('#carousel-reviews .carousel-item');
            var totalItems = carouselItems.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") {
                        carouselItems.eq(i).appendTo('#carousel-reviews .carousel-inner');
                    }
                    else {
                        carouselItems.eq(0).appendTo('#carousel-reviews .carousel-inner');
                    }
                }
            }
        });
        //and if you need to do this to #carousel-portfolio too: 

       $('#carousel-portfolio').on('slide.bs.carousel', function (e) {

            var $e = $(e.relatedTarget);
            var idx = $e.index();
            var itemsPerSlide = 3;
            //also, here, specify selection only to #carousel-reviews: 
            var carouselItems = $('#carousel-portfolio .carousel-item');
            var totalItems = carouselItems.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") {
                        carouselItems.eq(i).appendTo('#carousel-portfolio .carousel-inner');
                    }
                    else {
                        carouselItems.eq(0).appendTo('#carousel-portfolio .carousel-inner');
                    }
                }
            }
        });

    });
    </script>

Answer 2

Although you have unique identifiers, they are not being used to initialize each carousel separately. Additionally, you are triggering the slide.bs.carousel event on #carousel-reviews, but then modifying both carousels' items within the same function, leading to unexpected behavior.

Take a look at your code:

<script>
// Stop portfolio slider from auto looping
$('.carousel').carousel({ //HERE YOU INITIATE BOTH CAROUSELS AT SAME TIME
  interval: false
})
</script>

<script>
jQuery(document).ready(function() {

    /*
        Carousel
    */
    $('#carousel-reviews').on('slide.bs.carousel', function (e) {

        var $e = $(e.relatedTarget);
        var idx = $e.index();
        var itemsPerSlide = 3;
        var totalItems = $('.carousel-item').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').eq(i).appendTo('.carousel-inner');
                }
                else {
                    $('.carousel-item').eq(0).appendTo('.carousel-inner');
                }
            }
        }
    });

});
</script>

Try initializing them separately and handling .carousel-item for each carousel individually:

<script>
    // Stop portfolio slider from auto looping
   $('#carousel-portfolio').carousel({
      interval: false
    })
    $('#carousel-reviews').carousel({ 
      interval: false
    })
    </script>

    <script>
    jQuery(document).ready(function() {

        /*
            Carousel
        */
        $('#carousel-reviews').on('slide.bs.carousel', function (e) {

            var $e = $(e.relatedTarget);
            var idx = $e.index();
            var itemsPerSlide = 3;
            //also, here, specify selection only to #carousel-reviews: 
            var carouselItems = $('#carousel-reviews .carousel-item');
            var totalItems = carouselItems.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") {
                        carouselItems.eq(i).appendTo('#carousel-reviews .carousel-inner');
                    }
                    else {
                        carouselItems.eq(0).appendTo('#carousel-reviews .carousel-inner');
                    }
                }
            }
        });
        //and if you need to do this to #carousel-portfolio too: 

       $('#carousel-portfolio').on('slide.bs.carousel', function (e) {

            var $e = $(e.relatedTarget);
            var idx = $e.index();
            var itemsPerSlide = 3;
            //also, here, specify selection only to #carousel-reviews: 
            var carouselItems = $('#carousel-portfolio .carousel-item');
            var totalItems = carouselItems.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") {
                        carouselItems.eq(i).appendTo('#carousel-portfolio .carousel-inner');
                    }
                    else {
                        carouselItems.eq(0).appendTo('#carousel-portfolio .carousel-inner');
                    }
                }
            }
        });

    });
    </script>

Leverage the power of Bootstrap by incorporating not one, but two carousels on a single page - one featuring a single item per

I have a unique challenge with using multiple Bootstrap Carousels on my WordPress website

Explore my carousels:

Answer №1

Similar questions

Update and swap out outdated material

What is the best method for efficiently loading SVG icons on an HTML page without redundancy? / Is utilizing <use href> recommended?

What does the term "root element" refer to in the Material-UI documentation?

Guide to saving an http response as a file and automatically retrying on a 503 error

Prevent the row height from fluctuating following the fadeOut() effect

Sending a PDF document and JSON data via an AJAX POST request

The never-ending scrolling problem: Autoscroll refusing to halt - a perplexing conundrum in the world

What could be causing a syntax error when I use `npm run start` with npm react-scripts?

Exploring Event Propagation in AngularJS

Is the $ajax() function truly asynchronous when invoking a success callback?

Can you explain the significance of this code snippet 'true <=> false'?

Identifying the Click Event Within an ngx Bootstrap Modal

DxDataGrid: Implementing a comprehensive validation system for multiple edit fields

Which one relies on the other: angular-data or angular-cache?

Retrieve the input field's value with Selenium, verify its accuracy, and proceed to log a message to the console

What is the best way to incorporate a JSON file into a JavaScript class?

JS this, that, and then boggled my mind

What is the process for utilizing jQuery and ajax to retrieve data from a MySQL database?

Repetitive NodeJS event triggers within Electron-React application causing unexpected behavior

Easily resolving conflicts by removing `package-lock.json`