не работает autoplay слайдера swiper в bootstrap tabs

564
28 октября 2017, 18:24

добрый день! есть табы 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
    });
});
READ ALSO
Написать калькулятор товаров на сайте

Написать калькулятор товаров на сайте

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

493
React JS Вставить код символа в JSX

React JS Вставить код символа в JSX

Подскажите как правильно заменять в строке паттерн кодом определенного символа"$1  " - не пойму где здесь ошибка, в верстку вместо короткого...

527
JS не видит своих же методов

JS не видит своих же методов

помогите, в чем ошибка? мне пишет, что нет такого метода "Style"

273
Реализация создания папок и файлов ReactJS

Реализация создания папок и файлов ReactJS

Помогите с выполнением заданияПосоветуйте в каком направлении двигаться чтобы его выполнить

285