Name: Слайдер с видео- и другим типом контента: Owl-Carousel, jQuery
Uploaded: 2023-09-01T14:24:38+03:00
Channel: qfurs
Description: Нужно сделать на странице сайта карусель (слайдер) с разным типом контента - видео, текст, вставка видео из Youtube. 💾 Вебмастеринг без воды

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

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

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

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

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

Пример: Карусель с разным типом контента (Текст, видео и вставка видео с 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 нет возможности внешнего подключение — нужно скачать и загрузить к себе на сайт.


<!-- Подключение jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<!-- Подключение Owl Сarousel -->
<link rel="stylesheet" href="/inc/owl_carousel/owl.carousel.min.css">
<link rel="stylesheet" href="/inc/owl_carousel/owl.theme.default.min.css">
<script src="/inc/owl_carousel/owl.carousel.min.js"></script>


<!-- Carousel -->
<div class="carousel_box owl-carousel owl-theme">
	<div class="item">
		Мне вчера пришло сообщение с неизвестного мне номера:<br>
		«Прости, солнце, дело не в тебе....<br>
		Так бывает. Прощай!»<br>
		Дожила, блин, меня даже чужой мужик бросил.<br>
	</div>
	<div class="item item-video">
		<div class="video">
			<video width="100%" height="auto" poster="/wp-content/uploads/2023/08/videofone_1.jpg">
			  <source src="/wp-content/uploads/2023/08/videofone_1.mp4" type="video/mp4"></source>
			  <source src="/wp-content/uploads/2023/08/videofone_1.webm" type="video/webm">
			  <source src="/wp-content/uploads/2023/08/videofone_1.ogv" type="video/ogg">
			</video>
			<button class="v_play"></button>
		</div>
	</div>
	<div class="item">
		Идёт премьера в театре, но мужчине-зрителю всё время мешают разговором две сидящие сзади дамы.<br>
		- Простите, я не могу услышать ни одного слова!<br>
		- Да вы просто нахал! - возмутились женщины. То о чём мы говорим, вас совершенно не касается.<br>
	</div>
	<div class="item">
		<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>
	</div>
</div>

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

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

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

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

</div>

</video>

</div>

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

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

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

</div>

</div>

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


<?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 );
}

<?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

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


// # Инициализация карусели
	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}
				}
			})
		
	});

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

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


.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);
	}

.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-стили кнопки для плеера


// # Воспроизвести видео по кнопке
	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");
						}
				});
			}

		});

	});

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

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