Карусель Owl Carousel

В свой проект, в папку CSS скачиваем и помещаем файлы:

owl.carousel.css

owl.theme.default.css

В папку JS кладем:

owl.carousel.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;}