Работа с BxSlider

2 января, 2022

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() передается масив аргументов в формате JSON, например:

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

Данная запись означает, что у слайдера отсутствует пэйджери (pager — кнопки под слайдером), скорость перехода между слайдами (speed) равна 500мс и слайдер зациклен (infiniteLoop — при доходе до последнего слайда следующий будет первый). Более подробно про все свойвства вы можете прочитать здесь.

Далее с помощью css вы сможете полностью сделать слайдер под себя таким, каким вы хотите его видеть.

Если у вас появилась проблема  is not defined – читайте следующую статьи

2 комментария у статьи “Работа с BxSlider

  1. Спасибо, очень просто все обьяснили. Подскажите, почему у меня не срабатывает скрипт, пишет что jQuery not defined, что сделать что бы заработало. Когда все добавляю просто в документ html, все сработало.

    1. Здравствуйте, спасибо за ваш интерес. Да, это частая проблема, скорее всего у вас порядок скриптов не правильный. Сначало нужно подгружать jQuery, а только после bxSlider.

Добавить комментарий

Ваш адрес email не будет опубликован.

s
24

Количество специалистов которые будут работать с вами

5.0/5.0

Оценка от наших клиентов на Google отзывах

Цена зависит от типа сайта и функциональности. Сайт визитка стоит от 8 000 гривен. Все зависит от того какие специалисты будут задействованы в проекте. Нужна ли будет разработка логотипа для вашего бизнеса, разработка дизайна, Сео продвижение и тд. Для более подробной консультации свяжитесь с нашим менеджером по телефону +38 (067) 737 0360 или в любом удобном мессенджере.

Все зависит от сложности проекта и ваших пожеланий. Чаще всего, если речь идет о разработке визитки - это может занять около недели. Интернет-магазин может занять до месяца. Для более подробной консультации свяжитесь с нашим менеджером по телефону +38 (067) 737 0360 или в любом удобном мессенджере.

Да. Технически мы гарантируем годовую поддержку бесплатно. В это входит исправление ошибок, обновление модулей, чистка от вирусов а также мелкие задачи.

При разработке сайта мы изначально его настраиваем под Google индексацию для дальнейшего продвижения. То есть после сдачи сайта, он не будет просто висеть в интернете, но для этого есть ряд рекомендация от наших специалистов которые мы дадим по завершению проекта. Для того чтобы заказать услугу продвижения сайта - свяжитесь с нашим менеджером по телефону +38 (067) 737 0360 или в любом удобном мессенджере.

Мы гарантируем бесплатное годовое обслуживание сайта, а также бесплатный домен и хостинг на целый год. А так же мы официальная веб студия и несем ответственность за все не только на словах, а и на документах.

Мы оказываем наши услуги по всей Украине. Мы уже сотрудничаем и оказываем услуги таких городах как: Киев, Днепр, Кировоград, Никополь, Полтава, Черкассы, Харьков ,Кременчуг и тд.