Owl Carousel 2

Скачать плагин на официальном сайте

https://owlcarousel2.github.io/OwlCarousel2/

Для работы слайдера необходим установленный на сайт jqwery

https://jquery.com/download/

Подключение в head

<link href="css/owl.carousel.min.css" rel="stylesheet">

  <link href="css/owl.theme.default.css" rel="stylesheet">

  <script src="js/jquery-3.2.1.min.js"></script>

<script src="js/owl.carousel.min.js"></script>

carousel.min.css - файл стилей слайдера
owl.theme.default.css - пользовательский файл стилей
owl.carousel.min.js - скрипт слайдера

html разметка

<div class="owl-carousel owl-theme">
  
<div> Контент </div>

<div> Контент </div>

<div> Контент </div>

</div>

Управляющий скрипт

<script>

$(document).ready(function(){

$('.owl-carousel').owlCarousel();

});

</script>

Для примера. Настройки слайдера на главной странице - 1 слайд

$(document).ready(function(){

//Slider main page

  $(".owl-carousel").owlCarousel({

  items:1,

  loop:true,

  margin:0,

  nav:true,

  autoplay:true,

  autoplayTimeout:6000,

  smartSpeed:750,

  autoplayHoverPause:false

  });

  $(".owl-prev").html("<i class='fa fa-angle-left'></i>");

  $(".owl-next").html("<i class='fa fa-angle-right'></i>");

});

Для примера. Настройки карусели - 3 слайда

$(document).ready(function() {

  

$('.owl-carousel').owlCarousel({

loop:true, //прокручивание элементов по кругу

margin: 50, //отступы межу элементами

nav:true, //отобразить элементы управления

responsive:{

0:{

items:1

}, //при ширине окна < 992 отображать 1 элемент

992:{

items:3

}  //при ширине окна > 992 отображать 3 элемент

}

});



});

Документация по API Owl Carousel 2