@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>
  • Вопрос задан
  • 300 просмотров
Решения вопроса 1
one_day
@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;

подставьте себе в пример
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AndrewHaze
@AndrewHaze
Умею гуглить яндексом
Попробуйте добавить второй слайдер через <iframe>
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы