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

Создаём слайдер с простым 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

Ещё записи

Форма обратной связи во всплывающем окне

Пример отлаженной на многих проектах формы обратной связи, размещённой во всплывающем окне.

Почему не запускается Adobe Experience Design после обновления

Короткое описание возникшей проблемы

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

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