В свой проект, в папку CSS скачиваем и помещаем файлы:
В папку JS кладем:
Для подключения этой библиотеки добавляем в наш HTML код:
В начало HTML в раздел Head
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.theme.default.css">
В конец HTML в раздел Script
<script src="assets/js/owl.carousel.js"></script>
Так же в скриптах делаем базовые настройки для каруселей. Ниже представлен пример.
Для примера
<script src="assets/js/owl.carousel.js"></script>
<script>
$(document).ready(function(){
$('#carousel-one').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 7000,
smartSpeed: 2000,
margin: 0,
nav: false,
dots: true,
// navText: ["<img src='assets/images/prev.png'>", "<img src='assets/images/next.png'>"],
responsive:{
0:{
items:1
},
400:{
items:2
},
768:{
items:3
},
1200:{
items:4
}
}
});
});
</script>
Теперь блоку, в котором должна быть карусель присваиваем id="carousel-one" и добавляем ему классы "owl-carousel owl-theme". Верстка и стили для этого блока уже должны быть написаны.
Вот так
<div class="container-001__downblock">
<div id="carousel-one" class="container-001__downblock-items owl-carousel owl-theme">
<div class="container-001__downblock-items-itm">
<p class="container-001__downblock-items-itm-maintext">Разработка технологических цепочек1</p>
<div class="container-001__downblock-items-itm-info">
<p class="container-001__downblock-items-itm-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="container-001__downblock-items-itm-info-img" src="assets/images/mainicon001.png" alt="">
</div>
</div>
<div class="container-001__downblock-items-itm">
<p class="container-001__downblock-items-itm-maintext">Разработка технологических цепочек2</p>
<div class="container-001__downblock-items-itm-info">
<p class="container-001__downblock-items-itm-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="container-001__downblock-items-itm-info-img" src="assets/images/mainicon001.png" alt="">
</div>
</div>
<div class="container-001__downblock-items-itm">
<p class="container-001__downblock-items-itm-maintext">Разработка технологических цепочек3</p>
<div class="container-001__downblock-items-itm-info">
<p class="container-001__downblock-items-itm-info-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img class="container-001__downblock-items-itm-info-img" src="assets/images/mainicon001.png" alt="">
</div>
</div>
</div>
</div>
Каждому элементу карусели для центрирования по горизонтали нужно поставить "margin: auto;".
Например вот так
.container-001__downblock-items {
display: flex;
justify-content: space-around;}
.container-001__downblock-items-itm {
width: 300px;
background-color: #ffffffb3;
padding: 20px;
border: 2px solid #ffffff;
margin: auto;}
Если нужно разместить элементы навигации по центру карусели, то добавляем к нужной карусели (нужную карусель, если она у вас не одна отметьте по id) вот такие стили.
CSS
.owl-theme .owl-nav {
position: absolute;
top: 46%;
width: 100%;
display: flex;
justify-content: space-between;
margin: 0px!important;
text-align: center;}
.owl-nav button.owl-prev {
margin: 5px 0px 5px -50px!important;}
.owl-nav button.owl-next {
margin: 5px -50px 5px 0px!important;}