Создание двух слайдеров с нестандартным содержимым: встроенными постами из Инстаграма и видео

Создаём слайдер с простым html-содержимым (в данном случае кодом встраивания постов из Инстаграма)

Иногда бывает нужно вставить в шаблон некий контент из отдельной записи. Я использую для таких вещей отдельный contenttypes — blocks, то бишь «Блоки». В каждом блоке у меня есть набор полей на все случаи жизни, которые используются по необходимости, в том числе и repeater.

Рассмотрю конкретную задачу.

Задача:

На главной странице сайта сделать два слайдера: первый с вставленными постами из Инстаграма (html-содержимым), а второй с видео.

Решение:

1) Создаю блок «INDEX / Слайдеры с отзывами», которому назначаю slug «index-review-sliders».

2) Так как каждый пост для Инстаграма вставляется в виде генерируемого сервисом html-кода, то я буду использовать поле
repeater.

В поле этого типа можно добавлять любые встраиваемые поля, но у меня есть только поле для вставки html-кода.

Мой repeater выглядит так, в сущностях и в админ. панели.

contentslider:
            type: repeater
            group: contentslider
            fields:
                slidecontent:
                    type: html
                    height: 150px

Подробнее о типе поля repeater в документации «Болта».

3) Теперь о слик-слайдере.

Самое важное: это самый охрененный слайдер из тех что мне доводилось видеть. Среди той кучи глюченого и корявого инструментария, что гуглится по запросу «jquery слайдер» это настоящая роза среди говна.

Дальше скажу, что увидеть кучу примеров его работы, почитать документацию и собственно скачать слайдер можно на сайте проекта. Я же кратко покажу использование в конкретном примере.

Для работы слайдера принципиальны три вещи: базовая таблица стилей, сама библиотека и код инициализации. В сокращенном виде они у меня расположены примерно так.

<html>
    <head>
        <script src="https://yastatic.net/jquery/2.1.4/jquery.min.js"></script>
        <link rel="stylesheet" href="/theme/theme-name/css/slick.css">
    </head>
    <body>
        <!-- Тру-ля-ля, контент сайта -->
        <!-- Вообще подключать библиотеку и инициализировать можно и в голове,
             смотрите по ситуации, как вам удобнее. Главное, чтобы не перед Jquery -->
        <script src="/theme/theme-name/js/slick.js"></script>
        <script>
            $('.insta-slider').slick({
                centerMode: true,
                slidesToShow: 6,
                prevArrow: '<button type="button" class="slick-prev"></button>',
                nextArrow: '<button type="button" class="slick-next"></button>'
            })
            // Внимание!!! Набор опций применим к моему конкретному случаю. Свой набор создавайте,
            // глядя в оф. документацию. Ссылка выше имеется.
        </script>
    </body>
</html>

4) Теперь наполним блок в админ. панели контентом и создадим конструкцию для его вывода, используя всё вышеперечисленное.

<!-- Сперва мы определяем запись, конкретный блок, откуда будем выбирать контент -->
{% setcontent resource = 'block/index-review-sliders' %}    
<div class="insta-slider content-box">
    <!-- Затем циклом перебираем каждый из блоков репитера contentslider
    и в нужном месте выводим содержимое html-поля slidecontent. Кстати, если без добавки |raw
    html-код выводится обычным текстом, то напишите её и всё будет норм -->
    {% for slide in resource.contentslider %}
    <div class="insta-slider__item">{{ slide.slidecontent|raw }}</div>
    {% endfor %}
</div>

5) И вот так в итоге выглядит слайдер на сайте.

6) Для добавления видео в сущности blocks у меня есть дополнительный repeater — movieslider. Всё что нам нужно там указать — это код видео.

Первоначально я думал просто вставить в каждый слайд стандартный код встройки ютуб-видео. Однако появилась непредвиденная проблема. После запуска видео если мы сменяем слайд, то воспроизведение продолжается, что не есть хорошо. Я решил сделать так, чтобы при листании видео в неактивных слайдах останавливались, а для этого пришлось использовать АПИ «Ютуба».

7) Подключаем API

<script src="https://www.youtube.com/iframe_api"></script>

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

Для этого как нельзя лучше использовать переменную цикла loop.index.

Подробнее про переменные цикла можно почитать в русскоязычной документации к twig.

8) Строю конструкцию слайдера. Основные принципы построения аналогичны описанному выше слайдеру, а видео будет вставляться в контейнеры с классом movie-slider__iframe-box.

{% setcontent resource = 'block/index-review-sliders' %}
<div class="movie-slider content-box">
    {% for slide in resource.movieslider %}
    <div class="movie-slider__item">
        <div id="slide-movie-{{ loop.index }}" class="movie-slider__iframe-box"></div>
    </div>
    {% endfor %}
</div>

9) Инициализирую видео.

<script src="https://www.youtube.com/iframe_api"></script>
<script>        
    function onYouTubeIframeAPIReady() {
    // Обратите внимание, что я специально комментирую twig-теги в скрипте, дабы исключить
    // лишние косяки. После закомментированного twig-тега нужно перевести каретку,
    // иначе закомментируется след. строка скрипта.\
    // Сперва я инициализирую видео в каждом слайде, а потом создаю обработчик, который
    // останавливает все видео при нажатии кнопок, листающих слайды.
    //{% for slide in resource.movieslider %} 
       
        player{{ loop.index }} = new YT.Player('slide-movie-{{ loop.index }}', {
            width: 1200,
            height: 675,
            videoId: '{{ slide.moviecode }}',
            playerVars: {
            color: 'white'    
        },
        events: {
            onReady: initialize
        }
        });
    //{% endfor %}

    }

    function initialize(){
        $('.movie-slider__button').on('click', function () {
        //{% for slide in resource.movieslider %}

            player{{ loop.index }}.pauseVideo();            
        //{% endfor %}
    
        });
    }
</script>

comments powered by HyperComments

Ещё записи

Как я создаю хлебные крошки в Bolt CMS + немного о таксономии

Как я городил хлебные крошки на этом сайте. Показательный пример, осваивающим «Болт».

Скрываем факт раздачи wi-fi на Mac OS

Некоторые операторы стали брать плату за раздачу интернета с телефона. Краткая памятка как обойти.

Лайтрум изменяет цвета для NEF файлов (Никон). Что делать?

Как я справился с неприятной особенностью популярного фоторедактора.