Слайдер с видео- и другим типом контента: Owl-Carousel, jQuery

Задача. Нужно сделать на странице сайта карусель (слайдер) с разным типом контента — видео, текст, вставка видео из Youtube. Такое можно увидеть, например, при отображении блока с отзывами, где один элемент — текстовый, другой — видео.

При использовании разных библиотек для слайдеров появилась еще одна проблема — нельзя включить видео, т.к. при клике на него срабатывает каое-то событие самой карусели и видео не запусалось. Поэтому нужно еще сделать кнопку для видео с сайта. Плюс это позволит использовать свою кнопку вместо стандартной панели управления проигрывателя видео.

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

.carousel_box .item div {position: relative;}
.carousel_box .item {
border: 1px solid #999;
border-radius: 5px;
padding: 10px;
}

.item-video .v_play {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 62px !important;
height: 62px;
margin: auto;
cursor: pointer;
transition: 0.4s;
}
button.v_play:hover {opacity: 0.7;}
.video:hover video + button.v_play.play {opacity: 0.3;}
button.v_play.play {opacity: 0;}

button.v_play {
background-color: transparent;
background-image: url(/wp-content/uploads/2023/08/play.svg);
}

Мне вчера пришло сообщение с неизвестного мне номера:
«Прости, солнце, дело не в тебе….
Так бывает. Прощай!»
Дожила, блин, меня даже чужой мужик бросил.

Идёт премьера в театре, но мужчине-зрителю всё время мешают разговором две сидящие сзади дамы.
– Простите, я не могу услышать ни одного слова!
– Да вы просто нахал! – возмутились женщины. То о чём мы говорим, вас совершенно не касается.

Пример: Карусель с разным типом контента (Текст, видео и вставка видео с Youtube)

Решение. Для создания карусели выбрал js-библиотеку Owl Carousel 2 (также нужен jQuery).

Библиотека Owl-Carousel 2-2.3.4

Алгоритм создания карусли (слайдера) из разного типа контента:

Создаем HTML-макет карусели [Код №1.1] и перед самой каруселью подключаем библиотеку Owl-Carousel и jQuery. Если на WordPress, то загружаем файлы Owl-Carousel на сервер и подключаем в functions.php [Код №1.2].
Инициализируем карусель [Код №2]. Тут нужно обернуть блоки в классы owl-carousel owl-theme, чтобы стили применялись, а класс carousel_box может быть любым (можно через id).
Добавляем стили для кастомной кнопки [Код №3]. <button class="v_play"></button> может задаваться разными тегами, но должен идти сразу за видео.
Добавляем JS-скрипт, который будет обрабатывать кнопку воспроизведения видео [Код №4].

Для библиотеки Owl-Carousel нет возможности внешнего подключение — нужно скачать и загрузить к себе на сайт.

</p>
<p><!– Подключение jQuery –><br />
<script src=”http://code.jquery.com/jquery-latest.min.js” type=”text/javascript”></script></p>
<p><!– Подключение Owl Сarousel –><br />
<link rel=”stylesheet” href=”/inc/owl_carousel/owl.carousel.min.css”><br />
<link rel=”stylesheet” href=”/inc/owl_carousel/owl.theme.default.min.css”><br />
<script src=”/inc/owl_carousel/owl.carousel.min.js”></script></p>
<p><!– Carousel –><br />
<div class=”carousel_box owl-carousel owl-theme”><br />
	<div class=”item”><br />
		Мне вчера пришло сообщение с неизвестного мне номера:<br><br />
		«Прости, солнце, дело не в тебе….<br><br />
		Так бывает. Прощай!»<br><br />
		Дожила, блин, меня даже чужой мужик бросил.<br><br />
	</div><br />
	<div class=”item item-video”><br />
		<div class=”video”><br />
			<video width=”100%” height=”auto” poster=”/wp-content/uploads/2023/08/videofone_1.jpg”><br />
			  <source src=”/wp-content/uploads/2023/08/videofone_1.mp4″ type=”video/mp4″></source><br />
			  <source src=”/wp-content/uploads/2023/08/videofone_1.webm” type=”video/webm”><br />
			  <source src=”/wp-content/uploads/2023/08/videofone_1.ogv” type=”video/ogg”><br />
			</video><br />
			<button class=”v_play”></button><br />
		</div><br />
	</div><br />
	<div class=”item”><br />
		Идёт премьера в театре, но мужчине-зрителю всё время мешают разговором две сидящие сзади дамы.<br><br />
		– Простите, я не могу услышать ни одного слова!<br><br />
		– Да вы просто нахал! – возмутились женщины. То о чём мы говорим, вас совершенно не касается.<br><br />
	</div><br />
	<div class=”item”><br />
		<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/TAW6ryNPXLg?si=2A7l0YaVwl5YKqEt” title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share” allowfullscreen></iframe><br />
	</div><br />
</div></p>
<p>

<!– Подключение jQuery –>

<!– Подключение Owl Сarousel –>

<!– Carousel –>

Мне вчера пришло сообщение с неизвестного мне номера:<br>

«Прости, солнце, дело не в тебе….<br>

Так бывает. Прощай!»<br>

Дожила, блин, меня даже чужой мужик бросил.<br>

</div>

</video>

</div>

Идёт премьера в театре, но мужчине-зрителю всё время мешают разговором две сидящие сзади дамы.<br>

– Простите, я не могу услышать ни одного слова!<br>

– Да вы просто нахал! – возмутились женщины. То о чём мы говорим, вас совершенно не касается.<br>

</div>

</div>

Код №1.2: Макет карусели с разным типом контета

</p>
<p><?php</p>
<p>/* = Add Scripts and Styles = */<br />
add_action( ‘wp_enqueue_scripts’, ‘qfurs_add_style_script’,99);</p>
<p>function qfurs_add_style_script() {<br />
    wp_enqueue_style( ‘owl_carousel’, get_stylesheet_directory_uri() . ‘/inc/owlcarousel/owl.carousel.min.css’ );<br />
	wp_enqueue_script( ‘owl_carousel’, get_stylesheet_directory_uri() . ‘/inc/owlcarousel/owl.carousel.min.js’, array(‘jquery’), null, true );<br />
}</p>
<p>

<?php

/* = Add Scripts and Styles = */

add_action( ‘wp_enqueue_scripts’, ‘qfurs_add_style_script’,99);

function qfurs_add_style_script() {

wp_enqueue_style( ‘owl_carousel’, get_stylesheet_directory_uri() . ‘/inc/owlcarousel/owl.carousel.min.css’ );

wp_enqueue_script( ‘owl_carousel’, get_stylesheet_directory_uri() . ‘/inc/owlcarousel/owl.carousel.min.js’, array(‘jquery’), null, true );

}

Код №1.2: Подключение owl.carousel в WP

Карусель имеет много разных настроек — лучше смотреть на официальном сайте билиотеки.

</p>
<p>// # Инициализация карусели<br />
	jQuery.noConflict();<br />
	jQuery(document).ready(function($) {<br />
		// ## Инициализация карусели owl-carousel<br />
		$(‘.carousel_box.owl-carousel’).owlCarousel({<br />
			loop:true,<br />
			margin:10,<br />
			nav:false,<br />
			responsive:{<br />
				0:{items:1},<br />
				729:{items:2}<br />
				}<br />
			})</p>
<p>	});</p>
<p>

// # Инициализация карусели

jQuery.noConflict();

jQuery(document).ready(function($) {

// ## Инициализация карусели owl-carousel

$(‘.carousel_box.owl-carousel’).owlCarousel({

loop:true,

margin:10,

nav:false,

responsive:{

0:{items:1},

729:{items:2}

}

})

});

Код №2: Инициализация слайдера Owl-Carousel

</p>
<p>.carousel_box .item div {position: relative;}<br />
.carousel_box .item {<br />
	border: 1px solid #999;<br />
	border-radius: 5px;<br />
	padding: 10px;<br />
	}</p>
<p>/* Кастомная кнопка плеера */<br />
.item-video .v_play {<br />
	display: block;<br />
	position: absolute;<br />
	top: 0;<br />
	bottom: 0;<br />
	left: 0;<br />
	right: 0;<br />
	width: 62px !important;<br />
	height: 62px;<br />
	margin: auto;<br />
	cursor: pointer;<br />
	transition: 0.4s;<br />
	}</p>
<p>button.v_play:hover {opacity: 0.7;}</p>
<p>.video:hover video + button.v_play.play {opacity: 0.3;}<br />
button.v_play.play {opacity: 0;}</p>
<p>.carousel_box button {border: none;}<br />
button.v_play {<br />
	background-color: transparent;<br />
	background-image: url(/wp-content/uploads/2023/08/play.svg);<br />
	}</p>
<p>

.carousel_box .item div {position: relative;}

.carousel_box .item {

border: 1px solid #999;

border-radius: 5px;

padding: 10px;

}

/* Кастомная кнопка плеера */

.item-video .v_play {

display: block;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

width: 62px !important;

height: 62px;

margin: auto;

cursor: pointer;

transition: 0.4s;

}

button.v_play:hover {opacity: 0.7;}

.video:hover video + button.v_play.play {opacity: 0.3;}

button.v_play.play {opacity: 0;}

.carousel_box button {border: none;}

button.v_play {

background-color: transparent;

background-image: url(/wp-content/uploads/2023/08/play.svg);

}

Код №3: CSS-стили кнопки для плеера

</p>
<p>// # Воспроизвести видео по кнопке<br />
	document.addEventListener(‘DOMContentLoaded’, function(){</p>
<p>		// Получаем все видео<br />
		var videos = document.querySelectorAll(‘video’);</p>
<p>		// Добавляем обработчик события click к кнопкам<br />
		videos.forEach((video) => {<br />
			var button = video.nextElementSibling;<br />
			currentButton = button;</p>
<p>			if (currentButton){<br />
				currentButton.addEventListener(‘click’, (e) => {<br />
					// Если видео не воспроизводится запустим его<br />
					if (video.paused) {<br />
						video.play();<br />
						e.currentTarget.classList.add(“play”);<br />
					} else {<br />
						video.pause();<br />
						e.currentTarget.classList.remove(“play”);<br />
						}<br />
				});<br />
			}</p>
<p>		});</p>
<p>	});</p>
<p>

// # Воспроизвести видео по кнопке

document.addEventListener(‘DOMContentLoaded’, function(){

// Получаем все видео

var videos = document.querySelectorAll(‘video’);

// Добавляем обработчик события click к кнопкам

videos.forEach((video) => {

var button = video.nextElementSibling;

currentButton = button;

if (currentButton){

currentButton.addEventListener(‘click’, (e) => {

// Если видео не воспроизводится запустим его

if (video.paused) {

video.play();

e.currentTarget.classList.add(“play”);

} else {

video.pause();

e.currentTarget.classList.remove(“play”);

}

});

}

});

Код №4: JavaScript обработчик кастомной кнопки для видео.

See the Pen
Carousel Video Text content by qfurs (@qfurs)
on CodePen.

Пример карусели с разным контентом в Codepen

Понравилась статья?

Похожие публикации