Работа с BxSlider

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 — читайте следующую статьи