swiper js — jQuery плагин для создания адаптивной карусели картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера.
Это стандартный шаблон, который предлагается использовать разработчиками в мануале.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div> |
Нас интересуют три контейнера:
- swiper-pagination — вывод буллетов
- swiper-button-prev — показ предыдущего слайде
- swiper-button-next — показ следующего слайде
Все они размещены внутри swiper-container и поэтому не могут показаны за его пределами, т.к. он требует использования стиля:
|
1 |
overflow: hidden; |
Потому шаблон и инициализацию скрипта требуется модифицировать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="swiper-object"> <!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <div class="swiper-pagination"></div> </div> |
Я вынес навигацию из основного контейнера, теперь займемся инициализацией скрипта.
Следующий скрипт инициализирует все swiper контейнеры HTML документа:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
jQuery(function($) { $('.swiper-object .swiper-container').each(function(index, value) { var mySwiper = new Swiper(value, { autoplay: { delay: 5000, }, navigation: { nextEl: value.nextElementSibling.nextElementSibling, prevEl: value.nextElementSibling, }, pagination: { el: value.nextElementSibling.nextElementSibling.nextElementSibling, clickable: true, }, slidesPerView: 'auto', }); }); }); |
Осталось добавить нужные вам стили, чтобы позиционировать навигационные элементы так как вам нужно. В том числе их можно вытаскивать и за границы слайдера (например, с помощью отрицательных значений margin или абсолютного позиционирования), т.к. стили swiper-object уже зависят только от вас.
А хорошо ли это?
«Следующий скрипт инициализирует все swiper контейнеры HTML документа:»
Несколько экземпляров swiper ?
Мне вспоминается анекдот о двух психотерапевтах, который заканчивается фразой — ‘Желайте поговорить об этом?».
Спасибо за статью. Очень давно мучает вопрос, а как бы сделать так, что бы вместо булетов, за пределами или в контейнере, были надписи. То есть сейчас точки, а нужно например слайд 1 слайд 2 и тп… В долгу не останусь!
Не удобно в комментах писать развернутые ответы, почитайте вот тут, специально для вас написал:
Вывод кастомных булетов в swiper.js
Спасибо помогло накопать правильный ответ
https://gist.githubusercontent.com/terexin95/cad19cf347e0eddfbb95f98981d36ecc/raw/783cad772a49fc1edfed8f45fd14a8f66657e32e/swiper%2520custom
Вот тут есть доработанный код на js без jquery