Примеры BxSlider
В предыдущей статье я писал как установить этот плагин. В этом посте я покажу примеры BxSlider и его использования. В примерах ниже будут представлены стандартные настройки и возможности карусели. Этих примеров хватает чтобы показать мощность и гибкость данного плагина. Вы можете его использовать для:
- карусели товаров интернет магазина;
- основного слайдера (hero) в шапке вашей страницы;
- карусель с миниатюрами;
- карусель с пейджерами;
и множеством других «вкусностей».
Если вы хотите создать свой вариант карусели / слайдера то можете использовать этот генератор кода bxslider. На странице генератора вы можете поиграться с настройками плагина и узнать еще больше о возможностях bxslider.
Примеры BxSlider и его использование
Пример №1
Обычный слайдер с настройками по умолчанию:
Пример №2
Карусель с стандартными настройками :
Пример №3
BxSlider с вертикальным переключением слайдов:
Пример №4
Слайдер с адаптивной (резиновой) высотой:
Пример №5
Не цикличная карусель со скрытием кнопок навигации в конце или в начале работы, а также отключены точки(dot, pager):
Пример №6
Слайдер с миниатюрами (thumbnail):
Конечно в интернете есть множество других слайдеров и некоторые из них я собрал вместе в подборке слайдеров. А если говорить об их гибкости то уверен что мало из них может сравниться с BxSlider. Его преимущество в том что он подходит как для простых решений так и для более сложных.
Это могут быть такие задачи как:
- полная адаптивность;
- карусель внутри вкладок;
- слайдер в модальном окне;
- использование зуматора;
- видеослайды;
и тому подобное.
Конечно это не идеальный инструмент для реализации каруселей и слайдеров, но он все еще активно поддерживается и оптимизируется своим автором и его коллегами. Есть еще один неплохой вариант карусели под названием slick. Он также очень универсальный плагин и думаю главный конкурент bxslider.
Примеры bxSlider на этом не заканчиваются. Как вы уже поняли разнообразие использования очень большое и поэтому уместить все в одну статью сложно. Поэтому если Вас интересуют еще некоторые примеры, то пишите в комментарии и я постараюсь быстро ответить и по возможности помочь.