@djienbaev97

Почему одновременно работает owl carousel?

Я испоьзую 2 слайдера owl carousel на одном странице, для них есть кнопки left right, поблема в том что когда на первом слайдера нажмаю left или right то меняется и второй слайдер, двое одновременно, хотя у них разные id. Щас код покажу

$(document).ready(function(){
    const headerSlider = $(".owl-carousel");
    headerSlider.owlCarousel({
        loop: true,
        nav: false,
        dots: false,
        responsive:{
            0:{
                items:1,
            },
            600:{
                items:1,
            },
            991:{
                items:1,
            },
            1000:{
                items:5,
            }
        }
    });
    $('#headerSliderLeft').click(function () {
        headerSlider.trigger('prev.owl.carousel');
    })
    $('#headerSliderRight').click(function () {
        headerSlider.trigger('next.owl.carousel');
    })

});

$(document).ready(function(){
    const AlemSlider = $(".owl-carousel");
    AlemSlider.owlCarousel({
        loop: true,
        nav: false,
        dots: false,
        responsive:{
            0:{
                items:1,
            },
            600:{
                items:1,
            },
            991:{
                items:1,
            },
            1000:{
                items:5,
            }
        }
    });
    $('#AlemSliderLeft').click(function () {
        AlemSlider.trigger('prev.owl.carousel');
    })
    $('#AlemSliderRight').click(function () {
        AlemSlider.trigger('next.owl.carousel');
    })

});


Html код controls первого слайдера:
<div class="slide-next-prev">
                            <div class="slide-controls">
                                <a id="headerSliderLeft" class="left carousel-control">
                                    <span class="left-knopka glyphicon glyphicon-chevron-left"></span>
                                </a>
                            </div>
                            <div class="slide-controls2">
                                <a id="headerSliderRight" class="right carousel-control">
                                    <span class="right-knopka glyphicon glyphicon-chevron-right"></span>
                                </a>
                            </div>
                    </div>


и второго
<div class="slide-next-prev">
                        <div class="slide-controls">
                            <a id="AlemSliderLeft" class="left carousel-control">
                                <span class="left-knopka glyphicon glyphicon-chevron-left"></span>
                            </a>
                        </div>
                        <div class="slide-controls2">
                            <a id="AlemSliderRight" class="right carousel-control">
                                <span class="right-knopka glyphicon glyphicon-chevron-right"></span>
                            </a>
                        </div>
                    </div>
  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
Потому что вы их по классу получаете
Посмотрите что привязываете к headerSlider (ну во втором также)
Задайте айдишники не кнопкам а слайдерам
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Admitad Projects Москва
от 130 000 до 200 000 ₽
Fundraise Up Санкт-Петербург
от 2 500 до 3 500 $
27 мая 2020, в 12:59
25000 руб./за проект
27 мая 2020, в 12:46
5000 руб./за проект
27 мая 2020, в 12:19
25000 руб./за проект