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

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

SWIPER на GITHUB.

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

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

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

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

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

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

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

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

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

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

Прерывание цикла jQuery функции $.each()

Ноябрь 17, 2018 г.

Часто использую функцию jQuery API each(), но иногда требуется досрочно прервать выполнение этого цикла. Итак, как выйти из $.each()? Обработка происходит внутри функции, и на выходе требуется сигнализировать API что делать дальше. Перебор элементов ...

Читать

Как определить из скрипта, что fancybox popup уже открыт?

Декабрь 13, 2018 г.

Если пользуетесь jQuery плагином fancybox, то могли сталкиваться с тем, что необходимо увязать логику каких то других скриптов с фактом, показан ли попап ...

Читать

 

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

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



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

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

  1. Agapkin:

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

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