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

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

SWIPER на GITHUB.

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

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

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

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

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

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

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

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

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

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

Устанавливаем видео с youtube/vimeo на задний фон

Октябрь 14, 2017 г.

Речь пойдет об jQuery плагинах YTPlayer и Vimeo_player. Сложно что либо добавить к официальным описаниям на github и демосайтах, т.к. подключение и использование не отличается от многих других jQuery плагинов. Плагины позволяют подставить в бекграунд ...

Читать

Ajax в Drupal 7

Август 31, 2015 г.

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов. Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы ...

Читать

 

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

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



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

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

  1. Agapkin:

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

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