Слайдер jQuery: вертикальный и горизонтальный

jQuery & JavaScript WordSmall

Динамичность контента за счет слайдера используется на многих ресурсах абсолютно разной тематики. Но чаще всего попадаются на интернет-магазинах, новостных порталах и посадочных страницах вместо неподвижной «шапки», которая находится в самой верхней области сайта. Для WordPress можно найти плагин слайдера в официальном репозитории, их там очень много и с разными критериями.

Но исходя из случаев или определенных ситуаций рассмотрим jQuery слайдер с большим выбором параметров. То есть можно выбрать вертикальный слайд или горизонтальный, автоплей, стрелочки, перетаскиванием мышью, три эффекта, бесконечная карусель и другие нужные вещи.

ma5slider — слайдер изображений jQuery

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

Демо Скачать

Подключение

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Touch Event Support for jQuery UI -->
<script src="http://ma5slider.ma5.pl/js/jquery.ui.touch-punch.min.js"></script>
<script src="http://ma5slider.ma5.pl/js/ma5slider.min.js"></script>
<link href="http://ma5slider.ma5.pl/css/ma5slider.min.css" rel="stylesheet" type="text/css">
<script>
        $(window).on('load', function () {
            $('.ma5slider').ma5slider();
        });
</script>

HTML-код

<div class="ma5slider outside-navs outside-dots anim-horizontal loop-mode">
      <div class="slides">
          <a href="#slide-1"><img src="images/1.jpg" alt=""></a>
          <a href="#slide-2"><img src="images/2.jpg" alt=""></a>
          <a href="#slide-3"><img src="images/3.jpg" alt=""></a>
          <a href="#slide-4"><img src="images/4.jpg" alt=""></a>
          <a href="#slide-5"><img src="images/5.jpg" alt=""></a>
          <a href="#slide-6"><img src="images/6.jpg" alt=""></a>
      </div>
  </div>

Параметры конфигурации

Настройка слайда, расположение элементов, поведение карусели за счет классов-параметров добавляемых к блоку, в котором содержатся изображения.

anim-horizontal: Горизонтальная прокрутка слайда
anim-vertical: Вертикальная прокрутка слайда
anim-fade: Эффект «затухание» слайда
autoplay: Автоплей
loop-mode: Бесконечный цикл
horizontal-navs: Горизонтальная навигация по стрелке
vertical-navs: Вертикальная навигация по стрелке
inside-navs: Навигация внутри слайда
outside-navs: Навигация за пределом слайда
hover-navs: Навигация появляется при наведении мыши
hidden-navs: Спрятать навигацию
horizontal-dots: Горизонтальные точки изображений
bottom-dots: Точки, расположены после слайда
inside-dots: Точки, расположены внутри слайда
outside-dots: Точки, расположены за пределом слайда
hover-dots: Точки, появляются при наведении мыши на слайд
hidden-dots: Спрятать точки

Глобальные параметры

Еще дополнительные параметры, которые можно применять к конкретной картинке.

data-ma5-dot: Цвет точек навигации
data-ma5-dot-active: Цвет активной точки навигации
data-ma5-nav: Цвет навигации стрелок
data-ma5-anim: Эффект анимации слайда

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Добавить комментарий
bold quote code