1

добрый день! есть табы bootstrap (9 шт), в каждой табе есть swiper слайдер. Не работает autoplay во всех вкладках (начинает работать autoplay, если первый слайд потянуть курсором), кроме первой вкладки. как можно решить проблему?

    <div id="side-navigation" class="tabs custom-j">
                            <div class="col-md-10 nomargin nopadding">

                                <div id="snav-content1">

    <section id="slider" class="slider swiper_wrapper clearfix full-screen">
    <div class="swiper-container slider1 shuka full-screen">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url('{THEME}/images/mkess/slider/shuka/1.jpg');">

            </div>
            <div class="swiper-slide" style="background-image: url('{THEME}/images/mkess/slider/shuka/3.jpg');">

            </div>
        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    </section>
                                </div>

                                <div id="snav-content2">
    <section id="slider" class="slider swiper_wrapper clearfix full-screen">
    <div class="swiper-container slider1 shuka full-screen">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url('{THEME}/images/mkess/slider/shuka2/1.jpg');">

            </div>
            <div class="swiper-slide" style="background-image: url('{THEME}/images/mkess/slider/shuka2/3.jpg');">

            </div>
        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    </section>                               

                                </div>

                                <div id="snav-content3">
    <section id="slider" class="slider swiper_wrapper clearfix full-screen">
    <div class="swiper-container slider1 shuka full-screen">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image: url('{THEME}/images/mkess/slider/shuka3/1.jpg');">

            </div>
            <div class="swiper-slide" style="background-image: url('{THEME}/images/mkess/slider/shuka3/3.jpg');">

            </div>
        </div>

        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    </section>
<!-- И т.д.-->

                                </div>                      
                            </div>

                            <div class="col-md-2 col_last nomargin nopadding" style="height: auto;">

                                <ul class="sidenav">
                                    <li class="ui-tabs-active"><a href="#snav-content1" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>Новощукинская</a></li>
                                    <li><a href="#snav-content2" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>1</a></li>
                                    <li><a href="#snav-content3" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>2</a></li>
                                    <li><a href="#snav-content4" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>3</li>
                                    <li><a href="#snav-content5" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>4</a></li>
                                    <li><a href="#snav-content6" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>5</a></li>
                                    <li><a href="#snav-content7" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>6</a></li>
                                    <li><a href="#snav-content8" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>7</a></li>
                                    <li><a href="#snav-content9" class="bttn" data-toggle="tab"><i class="icon-chevron-left"></i>АО ЦНИИ "КУРС"</a></li>
                                </ul>



                            </div>

                        </div>

JS:

$(".swiper-container").each(function(index, element){
    var $this = $(this);
    $this.addClass("instance-" + index);
    $this.find(".swiper-button-prev").addClass("btn-prev-" + index);
    $this.find(".swiper-button-next").addClass("btn-next-" + index);

    var swiper = new Swiper(".instance-" + index, {
        loop: true,
        autoplay: 1000,
        speed: 650,
        autoplayStopOnLast: false,
        autoplayDisableOnInteraction: false,
        nextButton: ".btn-next-" + index,
        prevButton: ".btn-prev-" + index,
        observer: true
    });
});
1

1 ответ 1

0
autoplay: {
   delay: 1000,
   disableOnInteraction: false
}
1
  • 1
    добро пожаловать на Stack Overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 12 фев в 15:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.