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

Динамичность контента за счет слайдера используется на многих ресурсах абсолютно разной тематики. Но чаще всего попадаются на интернет-магазинах, новостных порталах и посадочных страницах вместо неподвижной «шапки», которая находится в самой верхней области сайта. Для 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： Эффект анимации слайда