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

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

SWIPER на GITHUB.

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

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

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

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

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

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

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

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

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

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

Создаём ripple эффект

Апрель 29, 2017 г.

Ripple эффект - это анимация, визуально напоминающая расходящийся круг. Иногда накладывают несколько эффектов сразу и это выглядит как расходящиеся круги ...

Читать

Как определить загружен ли определенный плагин для jQuery

Сентябрь 7, 2018 г.

Возможно ли проверить загружен или нет определенный jQuery плагин? Нет ничего проще! Самый краткий вариант проверки того, определен ли в текущий ...

Читать

 

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

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



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

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

  1. Agapkin:

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

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

  2. Артур:

    Спасибо за статью. Очень давно мучает вопрос, а как бы сделать так, что бы вместо булетов, за пределами или в контейнере, были надписи. То есть сейчас точки, а нужно например слайд 1 слайд 2 и тп… В долгу не останусь!