Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 149785
↧

Create carousel that holds videos and images using Slick.js

February 18, 2020, 1:32 pm
$
0
0

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:
https://jsfiddle.net/maltk/nj75vdch/28/

<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!

↧
Search
Viewing all articles
Browse latest Browse all 149785

Trending Articles

RAMAYAMPET Mandal Sarpanch | Upa-Sarpanch | Ward member Mobile Numbers Medak...

May 24, 2017, 2:00 am

लड़कियां सेक्स के दौरान क्यों करती है उह! आह!लड़कियां सेक्स के दौरान क्यों करती...

May 19, 2016, 1:54 am

Neem Baba Extra Questions Answer Class 6 English Poorvi

February 1, 2025, 5:19 am

Throw Back: 4×4 — Sikilitele (Ft Castro) Prod by JQ

March 5, 2015, 8:24 am

Rajasthan Board 10th Result 2016 Roll No wise & Name Wise

August 20, 2016, 5:13 pm

Lowe faces four theft charges

November 14, 2017, 6:52 pm

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Mafia, Murder & Mayhem In The Motor City: Detroit Mob Hit Timeline (1937-2007)

December 7, 2016, 3:57 pm

The 10 Tennessee Cities With The Largest Black Population For 2021

December 21, 2020, 10:12 am

Materials Around Us Class 6 Worksheet Science Chapter 6

October 3, 2024, 5:20 am

デスクトップ ヒープの枯渇

January 18, 2018, 8:31 pm

Best Suvichar in Hindi |बेस्ट सुविचार |शुभ विचार हिंदी में

March 7, 2020, 11:19 pm

Kanulanu Thaake Lyrics and translation | Manam (2014)

May 9, 2014, 5:45 am

Korean Sex Porn Videos: XXX Videos & Free Porn Movies

May 30, 2025, 9:29 pm

Teen Shot In Miami Drive-By Dies From Injuries

August 8, 2011, 1:16 pm

Download: IQ Muzatasha feat Shy D & Pmj – Ulesi NiFertilizer Yamavuto

March 22, 2018, 7:23 pm

Mahakal Attitude Status

February 29, 2020, 9:52 am

Property developer set up cannabis factory to help pay off debts...

August 3, 2015, 2:29 am

♡

July 11, 2015, 6:15 am

KB: How to troubleshoot issues when adding a Hyper-V host in System Center...

August 14, 2012, 10:05 am
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>