Если Вы хотите работать со мной, просто напишите!
Если Вам нужно выполнить HTML верстку, или хотите задать мне вопрос, заполните форму справа

X

Установка карусели BxSlider

BxSlider — лучший в своем роде плагин для создания карусели или слайдера. Могу сказать из личного опыта и стажа, что это действительно так. Если на сайте нужен слайдер либо карусель, то использую 90% случаев только его. Он подойдет как для обычного слайдера так и карусели с множеством настроек. Сейчас я Вам покажу как производиться  установка BxSlider себе на сайт.

Установка BxSlider

Пример №1 (Слайдер)

1. Шаг  — Подключение скрипта и стилей плагина.

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

Подключать нужно между тегами <head></head> вашей html страницы.

2. Шаг — вставка самого html кода слайдера.

<div class="slider">
  <div>I am a slide.</div>
  <div>I am another slide.</div>
</div>

Этот код нужно вставить между тегами <body></body>, в том месте где вы хотите отобразить сам слайдер.

3. Шаг — инициализация слайдера. Также можете воспользоваться генератором кода bxslider.

<script>
  $(document).ready(function(){
    $('.slider').bxSlider();
  });
</script>

Подключать нужно между тегами <head></head> вашей html страницы, но после кода, который Вы вставляли в шаге №1

В этом примере мы использовали bxSlider как слайдер (с одним основным слайдом) и настройками по умолчанию.

Посмотреть работу слайдера можете на примере ниже.

Пример №2(Карусель)

Делаем все тоже самое что и в предыдущем примере, а именно шаг №1 и шаг №2, а что касается шага №3, то немного его изменим.

3. Шаг — инициализация слайдера. Также можете воспользоваться генератором кода bxslider.

<script>
$(document).ready(function(){
  $('.slider').bxSlider({
    minSlides: 1, // Это минимальное количество слайдов
    maxSlides: 3, // Это максимальное количество слайдов
    slideWidth: 258 // Ширина одного слайда
  });
});
</script>

А в этом примере мы использовали bxSlider как карусель (с 3 основным слайдами) и для этого мы использовали некоторые настройки плагина.

Посмотреть работу карусели можете на примере ниже.

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

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

Также если есть вопросы то задавайте их в комментарии я постараюсь Вам помочь. А если нужно помочь с установкой данного плагина, или его настройкой — пишите в форму обратной связи либо e-mail