Предыдущая не работает с Bootstrap Carousel

У меня есть эта адаптивная загрузочная карусель с 3 элементами (которые перемещаются по 1 за раз) на обычном экране, но когда вы нажимаете предыдущую кнопку, похоже, что изображения в карусели перебрасываются. Можно ли это как-то исправить/я что-то не так делаю? Не могу найти ошибку в скрипте.

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

Запуск фрагмента кода, похоже, отлично работает с поведением предыдущей кнопки.

— 18.03.2019 22:10

Ваш фрагмент должен быть здесь дважды, они разные?

— 19.03.2019 03:41

Из вашего вопроса неясно - вы пытаетесь сделать что-то, что карусель Bootstrap не делает из коробки? Карусель Bootstrap не требует Javascript — просто добавьте атрибуты данных или один $('.carousel').carousel() — это все, что вам нужно. Что пытается сделать ваш код jQuery?

— 19.03.2019 03:45

Еще одно замечание: вы смешиваете версии CSS и JS для Bootstrap (3.1.1 и 3.0.3), что может вызвать проблемы.

— 19.03.2019 03:46

@Don'tPanic Насколько мне известно, начальная загрузка не позволяет одновременно использовать 3 изображения, поэтому используется jquery. Даже если версии CSS и JS совпадают, проблема все равно возникает.

— 19.03.2019 13:16

Хорошо, спасибо, я вижу. Это неясно для меня из вопроса, и в сочетании с тем, что ваш код дублируется 2 раза, возможно, неудивительно, что вы не получили здесь отличного ответа. Поиском выдал этот другой вопрос, который, кажется, спрашивает, что именно вы, может поможет.

— 20.03.2019 09:51

@Don'tPanic спасибо за ответ! Мой плохой, я должен был указать это. Я хочу, чтобы карусель отображала 3 изображения, но когда вы нажимаете кнопку сбоку, карусель перемещается вверх на 1 изображение. В моем примере это работает для правой кнопки, она аккуратно смещается влево. Но левая кнопка, кажется, перебрасывает изображения.

— 21.03.2019 14:47

javascript jquery html css carousel

18.03.2019 21:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

202

Ответы 1

Это связано с размером экрана окна медиабраузера. На маленьких экранах (например, фрагмент кода) это работает, но когда вы тестируете код в окне большего размера, это не работает. Следовательно, это связано с тем, что стили для @media (max-width: 767px) работают нормально, но для @media и выше (например, @media (min-width: 992px)) теги css не полный. На первый взгляд я заметил, что для больших размеров экрана нет тегов .active.

Когда я масштабирую страницу до меньшего экрана, проблема все еще возникает, и когда я добавляю теги .active к большему размеру экрана, третье изображение исчезает.

— 19.03.2019 13:18

18.03.2019 22:30