Previous not working with Bootstrap Carousel

Question

I have this responsive bootstrap carousel with 3 items (that move 1 at a time) on a regular screen, but when you press the previous button, it looks like the images in the carousel get tossed around. Is there any way to fix this / am I doing something wrong? I can't seem to find the error in the script.

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Carousel</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script>
            jQuery(document).ready(function() {

                jQuery('.carousel[data-type="multi"] .item').each(function(){
                    var next = jQuery(this).next();
                    if (!next.length) {
                        next = jQuery(this).siblings(':first');
                    }
                    next.children(':first-child').clone().appendTo(jQuery(this));

                    for (var i=0;i<1;i++) {
                        next=next.next();
                        if (!next.length) {
                            next = jQuery(this).siblings(':first');
                        }
                        next.children(':first-child').clone().appendTo($(this));
                    }
                          });

            });
    </script>
    <style>
        .carousel-control.left, .carousel-control.right {
            background-image:none;
        }

        .img-responsive{
            width:100%;
            height:100%;
        }

        @media (min-width: 992px ) {
            .carousel-inner .active.left {
                left: -33.33333%;
            }
            .carousel-inner .next {
                left:  33.33333%;
            }
            .carousel-inner .prev {
                left: -33.33333%;
            }
        }

        @media (min-width: 768px) and (max-width: 991px ) {
            .carousel-inner .active.left {
                left: -33.3%;
            }
            .carousel-inner .next {
                left:  33.3%;
            }
            .carousel-inner .prev {
                left: -33.3%;
            }
            .active > div:first-child {
                display:block;
            }
            .active > div:first-child + div {
                display:block;
            }
            .active > div:last-child {
                display:none;
            }
        }

        @media (max-width: 767px) {
            .carousel-inner .active.left {
                left: -100%;
            }
            .carousel-inner .next {
                left:  100%;
            }
            .carousel-inner .prev {
                left: -100%;
            }
            .active > div {
                display:none;
            }
            .active > div:first-child {
                display:block;
            }
        }
    </style>

</head>
<body>
<div class="container">
    <h1>Bootstrap Multiple image sliding demo</h1>
    <!--The main div for carousel-->
    <div class="container text-center">
        <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval=false id="fruitscarousel">

            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
            </div>

            <a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

        </div>
    </div>


</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Carousel</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script>
            jQuery(document).ready(function() {

                jQuery('.carousel[data-type="multi"] .item').each(function(){
                    var next = jQuery(this).next();
                    if (!next.length) {
                        next = jQuery(this).siblings(':first');
                    }
                    next.children(':first-child').clone().appendTo(jQuery(this));

                    for (var i=0;i<1;i++) {
                        next=next.next();
                        if (!next.length) {
                            next = jQuery(this).siblings(':first');
                        }
                        next.children(':first-child').clone().appendTo($(this));
                    }
                          });

            });
    </script>
    <style>
        .carousel-control.left, .carousel-control.right {
            background-image:none;
        }

        .img-responsive{
            width:100%;
            height:100%;
        }

        @media (min-width: 992px ) {
            .carousel-inner .active.left {
                left: -33.33333%;
            }
            .carousel-inner .next {
                left:  33.33333%;
            }
            .carousel-inner .prev {
                left: -33.33333%;
            }
        }

        @media (min-width: 768px) and (max-width: 991px ) {
            .carousel-inner .active.left {
                left: -33.3%;
            }
            .carousel-inner .next {
                left:  33.3%;
            }
            .carousel-inner .prev {
                left: -33.3%;
            }
            .active > div:first-child {
                display:block;
            }
            .active > div:first-child + div {
                display:block;
            }
            .active > div:last-child {
                display:none;
            }
        }

        @media (max-width: 767px) {
            .carousel-inner .active.left {
                left: -100%;
            }
            .carousel-inner .next {
                left:  100%;
            }
            .carousel-inner .prev {
                left: -100%;
            }
            .active > div {
                display:none;
            }
            .active > div:first-child {
                display:block;
            }
        }
    </style>

</head>
<body>
<div class="container">
    <h1>Bootstrap Multiple image sliding demo</h1>
    <!--The main div for carousel-->
    <div class="container text-center">
        <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval=false id="fruitscarousel">

            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
                <div class="item">
                    <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div>
                </div>
            </div>

            <a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
            <a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

        </div>
    </div>


</div>
</body>
</html>

Running the code snippet it seems working fine the behaviour of the previous button.. — Davide Casiraghi, Mar 18 '19 at 21:10
Is your snippet supposed to be here twice, are they different? — Don't Panic, Mar 19 '19 at 02:41
It isn't clear from your question - are you trying to do something Bootstrap's carousel does not do out of the box? [Bootstrap carousel does not require any Javascript](https://getbootstrap.com/docs/3.4/javascript/#carousel) - just add the data attributes, or a single `$('.carousel').carousel()` is all you need. What is your jQuery code trying to do? — Don't Panic, Mar 19 '19 at 02:45
One other note - you are mixing CSS and JS versions for Bootstrap (3.1.1 and 3.0.3) which is likely to cause problems. — Don't Panic, Mar 19 '19 at 02:46
@Don'tPanic As far as I am aware, bootstrap does not enable 3 images at once, hence why the jquery is used. Even when the CSS and JS versions are the same, the problem still occurs. — Bowis, Mar 19 '19 at 12:16
OK, thanks, I see. That isn't clear to me from the question, and combined with your code being duplicated 2x, it is maybe not surprising you didn't get a great response here. Some searching turned up [this other question which seems to be asking exactly what you are](https://stackoverflow.com/questions/20007610/bootstrap-carousel-multiple-frames-at-once), maybe it helps. — Don't Panic, Mar 20 '19 at 08:51
@Don'tPanic thanks for the response! My bad, I should've specified it. What I want is a carousel that displays 3 imanges, but when you press the button on the side, the carousel moves up 1 image. This works in my example for the right button, it neatly sldies to the left. But the left button seems to toss the images around. — Bowis, Mar 21 '19 at 13:47

N8888 · Answer 1 · 2019-03-18T21:35:49.020

0

It has to do with the media browser window screen size. In small screen sizes (e.g. the code snippet) it works, but when you test the code in a bigger window size it doesn't work. Hence it has to do with the fact that the styling for @media (max-width: 767px) works fine, but for those of @media and above (e.g. @media (min-width: 992px )), the css tags are not complete. At first glance, I notice that there is no .active tags for the bigger screen sizes.

edited Mar 18 '19 at 21:35

answered Mar 18 '19 at 21:30

N8888

670
2
14
20

When i scale the page to a smaller screen, the problem still occurs & when I add the .active tags to the bigger screen size, the 3rd image dissapears – Bowis Mar 19 '19 at 12:18

Previous not working with Bootstrap Carousel

1 Answers1