Предыдущий не работал с Bootstrap Carousel

ProgramBox

Предыдущий не работал с Bootstrap Carousel

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css #carousel

#javascript #jquery #HTML #css #carousel

Вопрос:

У меня есть эта адаптивная 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>

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

2. Предполагается, что ваш фрагмент должен быть здесь дважды, они разные?

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

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

5. @Don’T Panic Насколько мне известно, bootstrap не включает 3 изображения одновременно, следовательно, почему используется jquery. Даже когда версии CSS и JS одинаковы, проблема все еще возникает.

Ответ №1:

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