BxSlider простий та швидкий спосіб вставити кастомний слайдер на ваш сайт.

Підключення BxSlider

Для підключення даного інструменту вам необхідно зайти на  оф сайт

На сайті у вкладці інстал нам потрібно знайти кілька рядків підключення css і js:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>

Цей спосіб показує підключення через CDN, але також на цьому ж сайті ви можете завантажити ці файли локально.

Тепер зробимо просту розмітку, bxSlider може працювати як з <li> так і з тегом <div>, але ми рекомендуємо використовувати наступну розмітку:

<div class="slider-wrapper">
   <ul>
     <li style="background-image: url(1.jpg)"><div>Slider text 1</div></li>
     <li style="background-image: url(2.jpg)"><div>Slider text 2</div></li>
     <li style="background-image: url(3.jpg)"><div>Slider text 3</div></li>
   </ul>
  </div>

У такому разі кожним слайдом буде вважатися <li>, <ul> це тег до якого буде звертатися ініціалізація слайдера, <div class=»slider-wrapper»> це обгортка слайдера так як при ініціалізації поверх зазначеного тега вище зазначено <ul>, буде створено дві службові обгортки: <div class=”bx-wrapper”> та <div class=”bx-viewport”>. Наявність цих класів і обумовлює написання обертового тега <div class=”slider-wrapper”>, оскільки службові класи мають палі css стилі і для більшої зручності роботи з ними нам необхідна обгортка.

Для ініціалізації самого слайдера потрібно вставити наступний код, код для прикладу ініціалізації нашої обгортки:

<script>
    $(document).ready(function(){
      $( ".slider-wrapper ul" ).bxSlider();
    });
  </script>

Тепер слайдер працюватиме з дефолтними налаштуваннями.

Кастомізація BxSlider

Для створення складнішого кастомного слайдера та управління його параметрами у функцію ініціалізації bxSlider() передається масив аргументів у форматі JSON, наприклад:

<script>
    $(document).ready(function(){
      $( ".slider-wrapper ul" ).bxSlider({
         pager: false,
         speed: 500,
         infiniteLoop: true
      });
    });
  </script>

Цей запис означає, що у слайдера відсутні пейджери (pager – кнопки під слайдером), швидкість переходу між слайдами (speed) дорівнює 500мс і слайдер зациклений (infiniteLoop – при доході до останнього слайда наступний буде перший). Докладніше про всі властивості ви можете прочитати  тут .

Далі за допомогою CSS ви зможете повністю зробити слайдер під себе таким, яким ви хочете його бачити.

Якщо у вас виникла проблема is not defined — читайте наступні статті