Показ навигации и пагинатора swiper js за пределами контейнера

swiper js — jQuery плагин для создания адаптивной карусели  картинок. Посмотрим как сверстать шаблон так, чтобы элементы управления слайдером можно было размещать за пределами контейнера слайдера.

SWIPER на GITHUB.

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

Нас интересуют три контейнера:

  • swiper-pagination — вывод буллетов
  • swiper-button-prev — показ предыдущего слайде
  • swiper-button-next — показ следующего слайде

Все они размещены внутри swiper-container и поэтому не могут показаны за его пределами, т.к. он требует использования стиля:

Потому шаблон и инициализацию скрипта требуется модифицировать.

Я вынес навигацию из основного контейнера, теперь займемся инициализацией скрипта.

Следующий скрипт инициализирует все swiper контейнеры HTML документа:

Осталось добавить нужные вам стили, чтобы позиционировать навигационные элементы так как вам нужно. В том числе их можно вытаскивать и за границы слайдера (например, с помощью отрицательных значений margin или абсолютного позиционирования), т.к. стили swiper-object уже зависят только от вас.

Написать комментарий

Мало букафф? Читайте есчо !

Сообщение Cannot read property 'msie' of undefined

Апрель 13, 2017 г.

Два вероятных случая могут генерировать данное сообщение в консоли браузера. Раннее обращение к js плагину Те или иные свойства могут быть недоступны, если вы обращаетесь к методам и свойствам до того как они определены. В данном случае обращение ...

Читать

Fancybox прокручивает основное окно к верху

Июль 13, 2016 г.

Сталкивался с таким поведением плагина fancybox. При открытии модального окна, происходит прокрутка в основном окне к самому верху. Как с этим бороться? Это происходит не всегда, а при некоторых случаях верстки. Верстку уже менять проблематично, ...

Читать

 

Комментарии к «Показ навигации и пагинатора swiper js за пределами контейнера»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

Много комментариев в “Показ навигации и пагинатора swiper js за пределами контейнера”

  1. Agapkin:

    А хорошо ли это?
    «Следующий скрипт инициализирует все swiper контейнеры HTML документа:»
    Несколько экземпляров swiper ?

    • Мне вспоминается анекдот о двух психотерапевтах, который заканчивается фразой — ‘Желайте поговорить об этом?».