Home » Jquery » javascript – Create carousel that holds videos and images using Slick.js

javascript – Create carousel that holds videos and images using Slick.js

Posted by: admin February 22, 2020 Leave a comment

Questions:

I’m having a hard time creating a carousel (using slick.js) that holds images and videos from youtube and Vimeo.

I’m trying to accomplish the follow tasks:

  1. Have the carousel autoplay
  2. When the carousel reaches the video, it should start and play the full duration of the video and then continue to the next slide, wheater it is a video or image.
  3. I’ll need this carousel to be responsive.

The link to view the carousel is below:
Demo

<section class="page-hero hero-max hero_feature new-hero-styles subHomeHero">

  <div class="homepage-hero slides">
    <div class="bg-image slide-image slide_item" style="background-image: linear-gradient(rgba(0,0,0, 0.1), rgba(0,0,0, 0.1)), url(https://images.pexels.com/photos/3737094/pexels-photo-3737094.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)" tabindex="-1">
      <div class="hero-overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="hero-content">
              <h3>Optimizing Communities Through Smart Construction</h3>
              <h1>A Robust Multifamily Program</h1><a class="btn btn-dark-yellow" href="#" tabindex="-1">Learn more </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="slide_item vimeo" style="" tabindex="-1">
      <div class="hero-overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="hero-content">
              <h3>Test</h3>
              <h1>test</h1><a class="btn btn-dark-yellow" href="#" tabindex="-1">Learn More</a>
            </div>
          </div>
        </div>
      </div>
      <iframe title="RUG" src="https://player.vimeo.com/video/142022401?dnt=1&app_id=122963&controls=0&hd=1&autohide=1" width="640" height="352" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" class="embed-player slide-media" data-video-length="66" style="width: 1551px; height: 873px; left: 0px;"></iframe>
    </div>
    <div class="bg-image slide-image slide_item" style="background-image: linear-gradient(rgba(0,0,0, 0.1), rgba(0,0,0, 0.1)), url(https://images.pexels.com/photos/3737094/pexels-photo-3737094.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)" tabindex="0">
      <div class="hero-overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="hero-content">
              <h3>National experience with a customized approach</h3>
              <h1>Coast to coast tenant coordination </h1><a class="btn btn-dark-yellow" href="#/" tabindex="0">Learn More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>



    jQuery.noConflict();
    (function($) {
        $(function() {
            var slideWrapper = $(".homepage-hero.slides"),
                iframes = slideWrapper.find(".embed-player"),
                lazyImages = slideWrapper.find(".slide-image"),
                lazyCounter = 0;

            // 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;
                var videoDuration = 0;

                currentSlide = slick.find(".slick-current");
                slideType = currentSlide.attr("class").split(" ")[1];
                player = currentSlide.find("iframe").get(0);
                // startTime = currentSlide.data("video-start");


                if($(player).data("video-length") !== undefined || $(player).data("video-length") !== null) {
                    videoDuration = $(player).data("video-length");
                } else {
                    videoDuration = 15000;
                }

                if (slideType === "vimeo") {
                    switch (control) {
                        case "play":
                            // if (
                            //     startTime != null &&
                            //     startTime > 0 &&
                            //     !currentSlide.hasClass("started")
                            // ) {
                            //     currentSlide.addClass("started");
                            //     postMessageToPlayer(player, {
                            //         method: "setCurrentTime",
                            //         value: startTime
                            //     });
                            // }
                            postMessageToPlayer(player, {
                                method: "setCurrentTime",
                                value: 0
                            });
                            postMessageToPlayer(player, {
                                method: "play",
                                value: 1
                            });
                            slideWrapper.slick("slickPause");

                            setTimeout(() => {
                                slideWrapper.slick("slickPlay");
                            }, videoDuration);
                            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"
                //             });
                //             slideWrapper.slick("slickPause");
                //             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();
                //         }
                //     }
                // }
            }

            // Resize player
            function resizePlayer(iframes, ratio) {
                if (!iframes[0]) return;
                var win = $(".homepage-hero.slides"),
                    width = win.width(),
                    playerWidth,
                    height = win.height(),
                    playerHeight,
                    ratio = ratio || 16 / 9;

                iframes.each(function() {
                    var current = $(this);
                    if (width / ratio < height) {
                        playerWidth = Math.ceil(height * ratio);
                        current
                            .width(playerWidth)
                            .height(height)
                            .css({
                                //left: (width - playerWidth) / 2,
                                top: 0
                            });
                    } else {
                        playerHeight = Math.ceil(width / ratio);
                        current
                            .width(width)
                            .height(playerHeight)
                            .css({
                                left: 0,
                                //top: (height - playerHeight) / 2
                            });
                    }
                });
            }

            // Initialize
            slideWrapper.on("init", function(slick) {
                slick = $(slick.currentTarget);
                setTimeout(function() {
                    playPauseVideo(slick, "play");
                }, 1000);
                resizePlayer(iframes, 16 / 9);
            });





            slideWrapper.on("beforeChange", function(event, slick) {
                slick = $(slick.$slider);
                playPauseVideo(slick, "pause");
            });
            slideWrapper.on("afterChange", function(event, slick) {
                slick = $(slick.$slider);
                playPauseVideo(slick, "play");
            });
            slideWrapper.on("lazyLoaded", function(event, slick, image, imageSource) {
                lazyCounter++;
                if (lazyCounter === lazyImages.length) {
                    lazyImages.addClass("show");
                    // slideWrapper.slick("slickPlay");
                }
            });

            setTimeout(() => {
                //start the slider
                slideWrapper.slick({
                    // fade:true,
                    autoplay: true,
                    autoplaySpeed: 5000,
                    lazyLoad: "progressive",
                    // speed: 2000,
                    arrows: true,
                    dots: false,
                    cssEase: "cubic-bezier(0.87, 0.03, 0.41, 0.9)",
                    nextArrow: $('.pseudo-slick-next')
                });

            }, 1500);

            // Resize event
            $(window).on("resize.slickVideoPlayer", function() {
                resizePlayer(iframes, 16 / 9);
            });
        });
    })(jQuery);
/* Slider */
.slick-slider {
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Slider */
.slick-loading .slick-list {
background: #fff url("js/slick/ajax-loader.gif") center center no-repeat;
}
/* Icons */
@font-face {
font-family: 'slick';
src: url("fonts/slick/slick.eot");
src: url("fonts/slick/slick.eot?#iefix") format("embedded-opentype"), url("fonts/slick/slick.woff") format("woff"), url("fonts/slick/slick.ttf") format("truetype"), url("fonts/slick/slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
background: transparent;
color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: white;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
}
[dir='rtl'] .slick-prev {
left: auto;
right: -25px;
}
.slick-prev:before {
content: "←";
}
[dir='rtl'] .slick-prev:before {
content: "→";
}
.slick-next {
right: -25px;
}
[dir='rtl'] .slick-next {
left: -25px;
right: auto;
}
.slick-next:before {
content: "→";
}
[dir='rtl'] .slick-next:before {
content: "←";
}
/* Dots */
.slick-dotted.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
}
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1;
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: black;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
color: black;
opacity: 0.75;
}
.hide-carousel {
display: none;
}
.show-carousel {
display: block;
}
.page-hero {
position: relative;
height: calc(100vh + 83px);
max-height: 830px;
}
.page-hero .container {
height: calc(100% - 162px);
}
.page-hero .row {
height: 100%;
}
.page-hero .slick-slider,
.page-hero .slick-list,
.page-hero .slick-track {
height: 100%;
}
.page-hero .bg-image {
background-size: contain;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100% !important;
min-height: 780px;
max-height: 830px;
width: 100%;
padding-top: 127px;
}
@media (max-width: 767px) {
.page-hero .bg-image {
height: 104vh;
min-height: 670px;
}
}
@media (min-width: 992px) {
.page-hero .bg-image {
padding-top: 212px;
}
}
.page-hero .bg-solid {
height: 100% !important;
min-height: 550px;
max-height: 780px;
max-height: 830px;
width: 100%;
padding-top: 127px;
}
@media (min-width: 992px) {
.page-hero .bg-solid {
padding-top: 212px;
}
}
.page-hero .slide_item.vimeo {
height: 100%;
}
.page-hero .slide_item.vimeo .vp-center {
margin-top: -54px;
}
@media (min-width: 992px) {
.page-hero .slide_item.vimeo .hero-content {
padding-top: 212px;
}
}
.page-hero .hero-content {
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-left: 15px;
padding-right: 15px;
z-index: 2;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.page-hero .hero-content h1,
.page-hero .hero-content h2,
.page-hero .hero-content h3 {
font-family: proxima-nova-extra-condensed, sans-serif;
font-weight: 600;
font-style: normal;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 3px 3px 20px rgba(0, 0, 0, 0.75);
}
@media (min-width: 768px) {
.page-hero .hero-content h1,
.page-hero .hero-content h2,
.page-hero .hero-content h3 {
letter-spacing: 3px;
}
}
.page-hero .hero-content h3 {
position: relative;
font-size: 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media (max-width: 767px) {
.page-hero .hero-content h3 {
font-size: 20px;
}
}
.page-hero .hero-content h3::before {
content: "";
width: 30px;
height: 2px;
background-color: #fff;
margin-right: 16px;
}
@media (min-width: 768px) {
.page-hero .hero-content h3::before {
width: 67px;
}
}
.page-hero .hero-content.hero-text-large h1 {
font-size: 70px;
}
@media (max-width: 767px) {
.page-hero .hero-content.hero-text-large h1 {
font-size: 42px;
line-height: 1;
}
}
.page-hero .hero-content.hero-text-large h2 {
font-size: 40px;
}
.page-hero .profileHero-overlay {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.page-hero.hero-min {
min-height: 435px;
margin-bottom: 50px;
}
.page-hero.hero-min .hero-content {
padding: 55px 0;
}
.page-hero.hero-min .hero-content h1 {
font-size: 65px;
font-family: proxima-nova-extra-condensed, sans-serif;
font-weight: 600;
font-style: normal;
letter-spacing: 3px;
line-height: 68px;
}
.page-hero.bg-transparent .hero-content h1,
.page-hero.bg-transparent .hero-content h2,
.page-hero.bg-transparent .hero-content h3 {
text-shadow: none;
}
.page-hero.bg-transparent .hero-content h1 {
color: #b0bc22;
}
.page-hero.bg-transparent .hero-content h3 {
color: #332e20;
}
.page-hero.bg-transparent .hero-content h3::before {
background-color: #b0bc22;
}
.hero-min.icon::before {
width: 330px;
height: 330px;
display: block;
position: absolute;
bottom: -10px;
left: -40px;
background-size: cover;
opacity: 0.13;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
z-index: 9999;
}
.subHomeHero .hero-content {
top: 15vh;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.35);
z-index: 1;
display: none;
}
.slide_item.vimeo {
position: relative;
overflow: hidden;
}
.embed-player.slide-media {
/*  position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0; */
}

Hopefully, this makes sense. Any help would be greatly appreciated!

Thanks!

How to&Answer: