Slick slider with Youtube video, Vimeo video, Image. Autoplay/Pause on slide change. For example on Shopify Store (liquid tempaltes files)

main-slider.liquid

<section class="main-slider">

    <div id="hero-slider">
        {% for block in section.blocks %}
            {% case block.type %}
                {% when 'image_slide' %}
                    <div>
                        <div class="main-slider__slide main-slider__slide--image" {% if block.settings.image != blank %} style="background-image: url({{ block.settings.image | img_url: "2000x" }})" {% endif %}>
                            <div class="main-slider__content">
                                {% if block.settings.slide_title != blank %}
                                    <h2 class="main-slider__title" style="color: {{ block.settings.text_color }}">{{ block.settings.slide_title }}</h2>
                                {% endif %}

                                {% if block.settings.slide_text != blank %}
                                    <div class="main-slider__text" style="color: {{ block.settings.text_color }}">{{ block.settings.slide_text }}</div>
                                {% endif %}

                                {% if block.settings.button_text != blank and block.settings.button_url != blank %}
                                    <a class="button-3d main-slider__button" href="{{ block.settings.button_url }}"><span class="button-3d__content">{{ block.settings.button_text }}</span></a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% when 'video_slide' %}
                    <div data-video-type="{{ block.settings.video.type }}" data-video-start="1">
                        <div class="main-slider__slide main-slider__slide--video">
                            <div class="main-slider__content">
                                {% if block.settings.slide_title != blank %}
                                    <h2 class="main-slider__title" style="color: {{ block.settings.text_color }}">{{ block.settings.slide_title }}</h2>
                                {% endif %}

                                {% if block.settings.slide_text != blank %}
                                    <div class="main-slider__text" style="color: {{ block.settings.text_color }}">{{ block.settings.slide_text }}</div>
                                {% endif %}

                                {% if block.settings.button_text != blank and block.settings.button_url != blank %}
                                    <a class="button-3d main-slider__button" href="{{ block.settings.button_url }}"><span class="button-3d__content">{{ block.settings.button_text }}</span></a>
                                {% endif %}
                            </div>

                            {% if block.settings.video.type == 'youtube' %}
                                {% comment %}
                                    *** for looping video use playlist=[VIDEOID]***
                                {% endcomment %}
                                <iframe
                                        class="embed-player"
                                        src="https://www.youtube.com/embed/{{ block.settings.video.id }}?enablejsapi=1&controls=0&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=1&start=1&playlist={{ block.settings.video.id }}"
                                        frameborder="0"
                                        allowfullscreen>
                                </iframe>

                            {% elsif block.settings.video.type == 'vimeo' %}
                                <iframe
                                        class="embed-player"
                                        src="https://player.vimeo.com/video/{{ block.settings.video.id }}?title=0&byline=0&portrait=0&autoplay=1&loop=1&controls=0&autohide=1&muted=1"
                                        frameborder="0"
                                        webkitallowfullscreen
                                        mozallowfullscreen
                                        allowfullscreen>
                                </iframe>
                            {% endif %}

                        </div>
                    </div>
            {% endcase %}
        {% endfor %}
    </div>
</section>


<style>

    @media (min-width: 992px) {
        #shopify-section-{{ section.id }} .main-slider__title {
            font-size: {{ section.settings.banner_heading_fz }}px;
        }
    }

    #shopify-section-{{ section.id }} .main-slider__text {
        font-size: {{ section.settings.banner_text_fz }}px;
    }
</style>


{% schema %}
    {
        "name": "Main Slider",
        "settings": [
            {
                "type": "range",
                "id": "banner_heading_fz",
                "min": 30,
                "max": 55,
                "unit": "px",
                "step": 1,
                "label": "Slider heading font size",
                "default": 42
            },
            {
                "type": "range",
                "id": "banner_text_fz",
                "min": 18,
                "max": 30,
                "unit": "px",
                "step": 1,
                "label": "Slider text font size",
                "default": 20
            }
        ],
        "blocks": [
            {
                "type": "image_slide",
                "name": "Image slide",
                "settings": [
                    {
                        "type": "image_picker",
                        "id": "image",
                        "label": "Image"
                    },
                    {
                        "type": "richtext",
                        "id": "slide_title",
                        "label": "Slide heading"
                    },
                    {
                        "type": "richtext",
                        "id": "slide_text",
                        "label": "Slide text"
                    },
                    {
                        "type": "text",
                        "id": "button_text",
                        "label": "Button text"
                    },
                    {
                        "type": "url",
                        "id": "button_url",
                        "label": "Button url"
                    },
                    {
                        "type": "color",
                        "id": "text_color",
                        "label": "Text color",
                        "default": "#000000"
                    }
                ]
            },
            {
                "type": "video_slide",
                "name": "Video slide",
                "settings": [
                    {
                        "type": "video_url",
                        "id": "video",
                        "accept": ["youtube", "vimeo"],
                        "label": "Video",
                        "info": "Use video from Youtube or Vimeo"
                    },
                    {
                        "type": "richtext",
                        "id": "slide_title",
                        "label": "Slide title"
                    },
                    {
                        "type": "richtext",
                        "id": "slide_text",
                        "label": "Slide text"
                    },
                    {
                        "type": "text",
                        "id": "button_text",
                        "label": "Button text"
                    },
                    {
                        "type": "url",
                        "id": "button_url",
                        "label": "Button url"
                    },
                    {
                        "type": "color",
                        "id": "text_color",
                        "label": "Text color",
                        "default": "#000000"
                    }
                ]
            }
        ],
        "presets": [
            {
                "name": "Main slider",
                "category": "Slider"
            }
        ]
    }
{% endschema %}

main-slider.scss

/* 
Breakpoint it's a @media (max-width: {number}) { your styles },
for example:
@include breakpoint(medium) it's equal to

@media (max-width: 1199px) {}

*/

.main-slider {


    .main-slider__slide {
        position: relative;
        height: 640px;

        @include breakpoint(medium) {
            height: 0;
            padding-top: 56.25%;
        }
    }

    .main-slider__slide--image {
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
    }

    .main-slider__slide--video {

        iframe {
            position: absolute;
            left: 0;
            width: 100%;
            //
            height: calc(100vw * 0.5625);
            top: 50%;
            transform: translateY(-50%);
            //
            pointer-events: none; // prevent click on embed video
        }

        @include breakpoint(medium) {
            iframe {
                height: 100%;
                top: 0;
                transform: translateY(0);
                pointer-events: auto;
            }
        }
    }

    .main-slider__content {
        position: absolute;
        left: 57px;
        top: 100px;
        z-index: 3;
        max-width: 600px;
        width: 100%;

        @include breakpoint(small) {
            top: 70px;
        }

        @include breakpoint(extra-small) {
            display: none;
        }
    }

    .main-slider__title {
        font-family: $marion-regular;
        font-size: 42px;
        color: #000;

        p {
            line-height: 1;
        }

        @include breakpoint(small) {
            font-size: 32px;
        }
    }

    .main-slider__text {
        margin-top: 16px;
        font-family: $nobel-book;
        font-size: 20px;
        font-weight: normal;
        line-height: 1.25;
        letter-spacing: 0.3px;
        color: #0a0a0a;

        +* {
            margin-top: 42px;
        }
    }

    .main-slider__button {}

}

main.js

function initMainSlider() {
    let mainSlider = $('#hero-slider');

    if (!mainSlider.length) {
        return false;
    }

    // POST commands to YouTube or Vimeo API
    function postMessageToPlayer(player, command) {
        if (player == null || command == null) return;
        player.contentWindow.postMessage(JSON.stringify(command), "*");
    }

    // When the slide is changing
    function playPauseVideo(slick, control) {
        var currentSlide, slideType, startTime, player, video;

        currentSlide = slick.find(".slick-current");
        slideType = currentSlide.attr("data-video-type");
        player = currentSlide.find("iframe").get(0);
        startTime = currentSlide.data("video-start");

        if (slideType === "vimeo") {
            switch (control) {
                case "play":
                    // if ((startTime != null && startTime > 0) && !currentSlide.hasClass('started')) {
                    //     currentSlide.addClass('started');
                    //     postMessageToPlayer(player, {
                    //         "method": "setCurrentTime",
                    //         "value": startTime
                    //     });
                    // }
                    console.log('play vimeo');
                    postMessageToPlayer(player, {
                        "method": "setVolume",
                        "value": 0
                    });
                    postMessageToPlayer(player, {
                        "method": "play",
                        "value": 1
                    });
                    break;
                case "pause":
                    postMessageToPlayer(player, {
                        "method": "pause",
                        "value": 1
                    });
                    break;
            }
        } else if (slideType === "youtube") {
            switch (control) {
                case "play":
                    postMessageToPlayer(player, {
                        "event": "command",
                        "func": "mute"
                    });
                    postMessageToPlayer(player, {
                        "event": "command",
                        "func": "playVideo"
                    });
                    break;
                case "pause":
                    postMessageToPlayer(player, {
                        "event": "command",
                        "func": "pauseVideo"
                    });
                    break;
            }
        } else if (slideType === "video") {
            video = currentSlide.children("video").get(0);
            if (video != null) {
                if (control === "play") {
                    video.play();
                } else {
                    video.pause();
                }
            }
        }
    }

    // Initialize
    mainSlider.on("init", function (slick) {
        slick = $(slick.currentTarget);
        setTimeout(function () {
            playPauseVideo(slick, "play");
        }, 1000);
    });
    mainSlider.on("beforeChange", function (event, slick) {
        slick = $(slick.$slider);
        playPauseVideo(slick, "pause");
    });
    mainSlider.on("afterChange", function (event, slick) {
        slick = $(slick.$slider);
        playPauseVideo(slick, "play");
    });

    mainSlider.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: false,
        infinite: false,
        arrows: false,
        responsive: [{
            breakpoint: 1200,
            settings: {
                dots: true,
                draggable: false,
                swipe: true
            }
        }]
    });
}

Swiping or dragging does not seem to be working. Known issue?

Swiping or dragging does not seem to be working. Known issue?

Hi lesterdefreitas.
What specifically doesn’t work?
Can you please provide a sample code, maybe I will try to help you.

The code looks awesome, but I tried to use it into Debut Theme, didn't work... did you use a version of jquery?

@Lysindr can you please help

The first video does not play auto,

if I used youtube autoplay - then the first slider goes to infinite

mainS lider.on("beforeChange", function (event, slick) { slick = $(slick.$slider); playPauseVideo(slick, "play"); });