Как сделать второй слайдер?

Question

[Alexandr59]

Как сделать второй слайдер с миниатюрами на странице? Использую
Thumbs Gallery With Two-way Control
idangero.us/swiper/demos/#.WcIqADMY5TY

Для простоты вынес код в jsfiddle

Пробовал в классах добавить в конце 2 и скопировать css и js с новыми названиями- не помогает.
На странице автора слайдера указано размещение только 2го обычного слайдера, а не слайдера с миниатюрами.

Вот как автор вызывает вторую и третью обычную карусель

<!-- Initialize Swiper -->
    <script>
    var swiper1 = new Swiper('.swiper1', {
        pagination: '.swiper-pagination1',
        paginationClickable: true,
        spaceBetween: 30,
    });
    var swiper2 = new Swiper('.swiper2', {
        pagination: '.swiper-pagination2',
        paginationClickable: true,
        spaceBetween: 30,
    });
    var swiper3 = new Swiper('.swiper3', {
        pagination: '.swiper-pagination3',
        paginationClickable: true,
        spaceBetween: 30,
    });
    </script>

Answer 1

[one_day]

css

html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container2,
    .swiper-container {
        width: 40%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    }
    .swiper-slide2,
  .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top2,
    .gallery-top {
        height: 40%;
        width: 50%;
    }
    .gallery-thumbs2,
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs2 .swiper-slide,
    .gallery-thumbs .swiper-slide {
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs2 .swiper-slide-active,
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }

js

var galleryTop = new Swiper('.gallery-top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same     
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true
    });
 var galleryTop2 = new Swiper('.gallery-top2', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same     
    });
    var galleryThumbs2 = new Swiper('.gallery-thumbs2', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true
    });   
    
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
    galleryTop2.params.control = galleryThumbs2;
    galleryThumbs2.params.control = galleryTop2;

подставьте себе в пример

Comments

[Alexandr59]

Спасибо за ответ!

Если планируем боле 10 слайдеров на странице, то на каждый писать доп.классы? =)

galleryThumbs10;
galleryTop10;

[one_day]

лучше через id

html

<!-- Swiper -->
    <div class="swiper-container gallery-top" id="top">
        <div class="swiper-wrapper">
            ...
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs" id="thumbs">
        <div class="swiper-wrapper">
            ...
        </div>
    </div>
    <br><br><br><br><br>
    Как сделать второй слайдер? 
    <br><br><br><br><br>
     <!-- Swiper 2 -->
    <div class="swiper-container gallery-top" id="top2">
        <div class="swiper-wrapper">
            ...
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs" id="thumbs2">
        <div class="swiper-wrapper">
            ...
        </div>
    </div>
        <br><br><br><br><br>
    Как сделать n слайдер? 
    <br><br><br><br><br>
     <!-- Swiper 2 -->
    <div class="swiper-container gallery-top" id="top3">
        <div class="swiper-wrapper">
            ...
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs" id="thumbs3">
        <div class="swiper-wrapper">
            ...
        </div>
    </div>

css

html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #fff;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 40%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    }
  .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top {
        height: 40%;
        width: 50%;
    }
    .gallery-thumbs {
        height: 20%;
        box-sizing: border-box;
        padding: 10px 0;
    }
    .gallery-thumbs .swiper-slide {
        height: 100%;
        opacity: 0.4;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
    }

js

var galleryTop = new Swiper('#top', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same     
    });
    var galleryThumbs = new Swiper('#thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true
    });
 var galleryTop2 = new Swiper('#top2', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same     
    });
    var galleryThumbs2 = new Swiper('#thumbs2', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true
    });   
     var galleryTop3 = new Swiper('#top3', {
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 10,
        loop:true,
        loopedSlides: 5, //looped slides should be the same     
    });
    var galleryThumbs3 = new Swiper('#thumbs3', {
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,
        loop:true,
        loopedSlides: 5, //looped slides should be the same
        slideToClickedSlide: true
    });  
    
    galleryTop.params.control = galleryThumbs;
    galleryThumbs.params.control = galleryTop;
    galleryTop2.params.control = galleryThumbs2;
    galleryThumbs2.params.control = galleryTop2;
    galleryTop3.params.control = galleryThumbs3;
    galleryThumbs3.params.control = galleryTop3;

[Alexandr59]

one_day, id надежнее, чем класс? спасибо за совет!

Answer 2

[Андрей]

Попробуйте добавить второй слайдер через <iframe>

Comments

[Alexandr59]

А откуда фрейм взять? =)
У нас планируется больше 10 слайдеров на 1 странице.
Получается неудобно делать 10 страниц со слайдерами