КАРУСЕЛЬ С РАЗНЫМ ВИДОМ КОНТЕНТА: видео, текст, Youtube

#wordpress #Javascript #JS #OwlCarousel #jQuery #frontend #Carousel #WpCraftTop
❓Задача: Нужно сделать на странице сайта карусель (слайдер) с разным типом контента — видео, текст, вставка видео из Youtube. Такое можно увидеть, например, при отображении блока с отзывами, где один элемент — текстовый, другой — видео
✅ Решение. Для создания карусели можно взять js-библиотеку Owl Carousel 2 (также нужен jQuery).
Алгоритм создания карусли из разного типа контента:
Создаем HTML-макет карусели и перед самой каруселью подключаем библиотеку Owl-Carousel и jQuery. Если на WordPress, то загружаем файлы Owl-Carousel на сервер и подключаем в functions.php.
Инициализируем карусель. Тут нужно обернуть блоки в классы owl-carousel owl-theme, чтобы стили применялись, а класс carousel_box может быть любым (можно через id).
Добавляем стили для кастомной кнопки. <button class="v_play"></button> может задаваться разными тегами, но должен идти сразу за видео.
Добавляем JS-скрипт, который будет обрабатывать кнопку воспроизведения видео.
...
💾 Код: Подробнее