Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Примеры BxSlider

В предыдущей статье я писал как установить этот плагин. В этом посте я покажу примеры BxSlider и его использования. В примерах ниже будут представлены стандартные настройки и возможности карусели. Этих примеров хватает чтобы показать мощность и гибкость данного плагина. Вы можете его использовать для:

  • карусели товаров интернет магазина;
  • основного слайдера (hero) в шапке вашей страницы;
  • карусель с миниатюрами;
  • карусель с пейджерами;

и множеством других «вкусностей».

Если вы хотите создать свой вариант карусели / слайдера то можете использовать этот генератор кода bxslider. На странице генератора вы можете поиграться с настройками плагина и узнать еще больше о возможностях bxslider.

Примеры BxSlider и его использование

Пример №1

Обычный слайдер с настройками по умолчанию:

Пример №2

Карусель с стандартными настройками :

Пример №3

BxSlider с вертикальным переключением слайдов:

Пример №4

Слайдер с адаптивной (резиновой) высотой:

Пример №5

Не цикличная карусель со скрытием кнопок навигации в конце или в начале работы, а также отключены точки(dot, pager):

Пример №6

Слайдер с миниатюрами (thumbnail):

Конечно в интернете есть множество других слайдеров и некоторые из них я собрал вместе в подборке слайдеров. А если говорить об их гибкости то уверен что мало из них может сравниться с  BxSlider. Его преимущество в том что он подходит как для простых решений так и для более сложных.

Это могут быть такие задачи как:

  • полная адаптивность;
  • карусель внутри вкладок;
  • слайдер в модальном окне;
  • использование зуматора;
  • видеослайды;

и тому подобное.

Конечно это не идеальный инструмент для реализации каруселей и слайдеров, но он все еще активно поддерживается и оптимизируется своим автором и его коллегами. Есть еще один неплохой вариант карусели под названием slick. Он также очень универсальный плагин и думаю главный конкурент bxslider.

Примеры bxSlider на этом не заканчиваются. Как вы уже поняли разнообразие использования  очень большое и поэтому уместить все в одну статью сложно. Поэтому если Вас интересуют еще некоторые примеры, то пишите в комментарии и я постараюсь быстро ответить и по возможности помочь.