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

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

SWIPER на GITHUB.

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

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

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

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

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

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

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

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

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

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

Проверка checkbox состояния checked, jQuery

Февраль 19, 2020 г.

Шаблон для проверки состояния элемента input[type='checkbox']. Код проверяет отмечен элемент или нет. [crayon-5fbebed4dc4e6540794651/] Проверка выполняется с помощью метода is(), который читает в данном случае не атрибуты тега input, а именно ...

Читать

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

 

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

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



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

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

  1. Agapkin:

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

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

  2. Артур:

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