Skip to content

Instantly share code, notes, and snippets.

@muhibbudins

muhibbudins/SampleSlider.html

Created April 1, 2018 05:30
Show Gist options
  • Save muhibbudins/c187b537b4c12c52a3767b70c5208410 to your computer and use it in GitHub Desktop.
Save muhibbudins/c187b537b4c12c52a3767b70c5208410 to your computer and use it in GitHub Desktop.
Download ZIP
Video slider using slick
Raw
SampleSlider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.banner-item {
position: relative;
width: 100%;
min-height: 600px;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="banner">
<div class="banner-item">
<div class="banner-overlay">
<button class="banner-button">play</button>
</div>
<iframe width="100%" height="600" src="https://www.youtube.com/embed/AntcyqJ6brc?rel=0&amp;enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="banner-item">
<div class="banner-overlay">
<button class="banner-button">play</button>
</div>
<iframe width="100%" height="600" src="https://www.youtube.com/embed/AntcyqJ6brc?rel=0&amp;enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.7/slick.min.js"></script>
<!-- Initialize Swiper -->
<script>
$banner = $('.banner')
$banner.slick({
slidesToScroll: 1,
autoplaySpeed: 6000,
swipe: true,
dots: true
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var data = {"event":"command","func":"stopVideo","args":""};
var message = JSON.stringify(data);
$("iframe", slick.$slides[currentSlide])[0].contentWindow.postMessage(message, '*');
}).on('swipe', function(event, slick, currentSlide, nextSlide) {
// console.log(event, slick, currentSlide, nextSlide)
$('.banner-button').show();
});
$('.banner-button').click(function(e) {
var $iframe = $(this).parent().next();
$iframe[0].src += "&autoplay=1";
$(this).hide();
e.preventDefault();
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment