Карусель 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;}

Как добавить видео в слайдер

Этот слайдер дает возможность еще добавить видео в свои слайды. Рассмотрим на примере как я это осуществил на примере одного из сайтов над которым я работал и который посажен на CMS ModX.

Пример (символ "((" заменяем на две квадратные скобки)

<div id="slider_tovar" class="flexslider">
	<ul class="slides">
	    ((*tovar-image:is=``:then=``:else=`
        <li>
			<a href="((*tovar-image))" data-fancybox="gallery-tovar">
	        <img class="container-cardpage-001__leftblock-img" src="((*tovar-image))">
	        </a>
		</li>
        `))
		((*tovar-image_02:is=``:then=``:else=`
        <li>
			<a href="((*tovar-image_02))" data-fancybox="gallery-tovar">
	        <img class="container-cardpage-001__leftblock-img" src="((*tovar-image_02))">
	        </a>
		</li>
        `))
        ((*tovar-image_03:is=``:then=``:else=`
        <li>
			<a href="((*tovar-image_03))" data-fancybox="gallery-tovar">
	        <img class="container-cardpage-001__leftblock-img" src="((*tovar-image_03))">
	        </a>
		</li>
        `))
        ((*tovar-image_04:is=``:then=``:else=`
        <li>
			<a href="((*tovar-image_04))" data-fancybox="gallery-tovar">
	        <img class="container-cardpage-001__leftblock-img" src="((*tovar-image_04))">
	        </a>
		</li>
        `))
        ((*tovar-image_05:is=``:then=``:else=`
        <li>
			<a href="((*tovar-image_05))" data-fancybox="gallery-tovar">
	        <img class="container-cardpage-001__leftblock-img" src="((*tovar-image_05))">
	        </a>
		</li>
        `))
        ((*tovar-image_06:is=``:then=``:else=`
        <li>
			<a href="((*tovar-image_06))" data-fancybox="gallery-tovar">
	        <img class="container-cardpage-001__leftblock-img" src="((*tovar-image_06))">
	        </a>
		</li>
        `))
        ((*tovar-image_07:is=``:then=``:else=`
        <li>
			<a href="((*tovar-image_07))" data-fancybox="gallery-tovar">
	        <img class="container-cardpage-001__leftblock-img" src="((*tovar-image_07))">
	        </a>
		</li>
        `))
        ((*tovar-image_08:is=``:then=``:else=`
        <li>
			<a href="((*tovar-image_08))" data-fancybox="gallery-tovar">
	        <img class="container-cardpage-001__leftblock-img" src="((*tovar-image_08))">
	        </a>
		</li>
        `))
        ((*tovar-video_01:is=``:then=``:else=`
        <li>
			<a href="((*tovar-video_01))" data-fancybox="gallery-tovar">
			<video width="385" height="385" controls><source src="((*tovar-video_01))" type="video/mp4"></video>
	        </a>
		</li>
        `))
        ((*tovar-video_02:is=``:then=``:else=`
        <li>
			<a href="((*tovar-video_02))" data-fancybox="gallery-tovar">
			<video width="385" height="385" controls><source src="((*tovar-video_02))" type="video/mp4"></video>
	        </a>
		</li>
        `))
        ((*tovar-video_03:is=``:then=``:else=`
        <li>
			<a href="((*tovar-video_03))" data-fancybox="gallery-tovar">
			<video width="385" height="385" controls><source src="((*tovar-video_03))" type="video/mp4"></video>
	        </a>
		</li>
        `))
	</ul>
</div>
<div id="carousel_tovar" class="flexslider navigation">
	<ul class="slides">
	    ((*tovar-image:is=``:then=``:else=`
        <li class="minislide">
			<img class="miniimg" src="((*tovar-image))" />
		</li>
        `))
		((*tovar-image_02:is=``:then=``:else=`
        <li class="minislide">
			<img class="miniimg" src="((*tovar-image_02))" />
		</li>
        `))
        ((*tovar-image_03:is=``:then=``:else=`
        <li class="minislide">
			<img class="miniimg" src="((*tovar-image_03))" />
		</li>
        `))
        ((*tovar-image_04:is=``:then=``:else=`
        <li class="minislide">
			<img class="miniimg" src="((*tovar-image_04))" />
		</li>
        `))
        ((*tovar-image_05:is=``:then=``:else=`
        <li class="minislide">
			<img class="miniimg" src="((*tovar-image_05))" />
		</li>
        `))
        ((*tovar-image_06:is=``:then=``:else=`
        <li class="minislide">
			<img class="miniimg" src="((*tovar-image_06))" />
		</li>
        `))
        ((*tovar-image_07:is=``:then=``:else=`
        <li class="minislide">
			<img class="miniimg" src="((*tovar-image_07))" />
		</li>
        `))
        ((*tovar-image_08:is=``:then=``:else=`
        <li class="minislide">
			<img class="miniimg" src="((*tovar-image_08))" />
		</li>
        `))
        ((*tovar-video_01:is=``:then=``:else=`
        <li class="minislide">
            <video width="105" height="91"><source src="((*tovar-video_01))" type="video/mp4"></video>
            <img class="play" src="assets/images/play.png" />
		</li>
        `))
        ((*tovar-video_02:is=``:then=``:else=`
        <li class="minislide">
            <video width="105" height="91"><source src="((*tovar-video_02))" type="video/mp4"></video>
            <img class="play" src="assets/images/play.png" />
		</li>
        `))
        ((*tovar-video_03:is=``:then=``:else=`
        <li class="minislide">
            <video width="105" height="91"><source src="((*tovar-video_03))" type="video/mp4"></video>
            <img class="play" src="assets/images/play.png" />
		</li>
        `))
	</ul>
</div>