If slide comes on video I want to play it and after completion it should slide again.Here I am able to play the video but not able to slide it back again after the video ends.
$(".main-slide").slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
autoplay: true,
autoplaySpeed: 2000,
})
$('.main-slide').on('afterChange', function(event, slick, currentSlide) {
var vid = $(slick.$slides[currentSlide]).find('.embed-video');
if (vid.length > 0) {
$('.main-slide').slick('slickPause');
$(vid).get(0).play();
}
});
var videos = document.getElementsByTagName('iframe');
for (var i=0; i<videos.length; i++) {
videos[i].addEventListener('ended',myHandler,false);
}
function myHandler(e) {
$('.main-slide').slick('slickPlay');
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="main-slide">
<div class="banner-image image slide1">
<img src="images/banner.jpg" />
</div>
<div class="banner-image image slide2">
<iframe class = "embed-video" id = "theVideo" src="https://www.youtube.com/embed/NsZ2nwWRH5c?rel=0&autoplay=1&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="banner-image image slide3">
<iframe class = "embed-video" id = "theVideo" src="https://www.youtube.com/embed/NsZ2nwWRH5c?rel=0&autoplay=1&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
video ends
Related
I created Slick Slide banners with iframe vimeo videos and images. I try to pause the current slider while playing the autoplay video.. I try with using "beforeChange' event for current slider pause, play only current slider video remain slider videos has to pause.. i don't understanding why not working where/what i am missing.
$(function() {
let $slideshow = $('.slick_slider');
$slideshow.slick({
initialSlide: 0,
autoplay: true,
autoplaySpeed: ImagePauses[0],
dots: false,
arrows: false,
fade: true
});
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
$slideshow.on('beforeChange', function(event, slick, currentSlide){
// pause old video (better performance)
if(!currentSlide) {
player.pause();
currentSlide.pause();
} else {
currentSlide.play();
player.pause();
}
});
});
<link href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slick_slider">
<div class="vimeo-wrapper">
<iframe src="http://player.vimeo.com/video/565964510?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565964510" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-0.jpg" class="entity-img" alt="Image"/>
</div>
<div class="vimeo-wrapper">
<iframe src="https://player.vimeo.com/video/565972134?api=1&byline=0&portrait=0&title=0&background=1&muted=1&autoplay=1&autopause=1&id=565972134" allow=autoplay frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div>
<img src="assets/img/img-6.jpg" class="entity-img" alt="Image"/>
</div>
</div>
I have a set of images to display using a responsive slide. I found a link to create responsive slide: http://responsiveslides.com. I don't know to add pause/play button inside the slide. My code is as follows:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="../responsiveslides.min.js"></script>
<script>
$("#slider4").responsiveSlides({
auto: true,
pager: false,
pauseControls:true,
nav: true,
pause: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
</head>
<body>
<div id="wrapper">
<a class="pause_slider" href="#">Pause Slider</a>
<a class="play_slider" href="#">Play Slider</a>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<img src="images/1.jpg" alt="">
<p class="caption">This is a caption</p>
</li>
<li>
<img src="images/2.jpg" alt="">
<p class="caption">This is another caption</p>
</li>
<li>
<img src="images/3.jpg" alt="">
<p class="caption">The third caption</p>
</li>
</ul>
</div>
The above is the source code. How can I add pause and play button into my slide?
Do you necessarily have to use that library or can you listen to another option?
I recommend you swiper. It is a better library in my opinion. Here is the get-started link.
In this example you can change the value of the boolean autoplay with methods start() (to autoplay the slider) and stop() (to pause it).
Here you have an example. Hope it helps:
$(document).ready(function() {
new Swiper('.swiper-container', {
speed: 600,
spaceBetween: 90,
autoplay: true,
disableOnInteraction: true,
loop: true
});
const mySwiper = document.querySelector('.swiper-container').swiper;
let isSliderActive = true;
$("#slider-control").click(function() {
if (isSliderActive) {
mySwiper.autoplay.stop();
isSliderActive = false;
this.innerHTML = 'PLAY';
console.log('slider stopped');
} else {
mySwiper.autoplay.start();
isSliderActive = true;
this.innerHTML = 'PAUSE';
console.log('slider activated');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.css" rel="stylesheet" />
<style>
.swiper-slide { text-align: center; }
</style>
<div class="swiper-container">
<!-- required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 1</div>
</div>
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 2</div>
</div>
<div class="swiper-slide">
<img src="https://place-hold.it/100x100">
<div>Slide 3</div>
</div>
</div>
</div>
<button id="slider-control">PAUSE</button>
If you can use another plug-in. wow slider You will get by default pause and play buttons.
There's a few issues with video backgrounds in the Slick.js carousel that I am running into.
HTML:
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="images/01.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/02.jpg">
</div>
<div class="item">
<img class="carousel-item-background" src="images/03.jpg">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" autoplay muted loop preload>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
JS:
$("#mySlick").on('init', function(event. slick){
$(".carousel-item-background").each(function(){
$(this).find('.bgVid').get(0).play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid(){
$("video[class='bgVid']").each(function(){
var ve = $(this);
var $video = ve.get(0);
if ($video.paused){
$video.play();
}
});
};
Barring the CSS I excluded, the slider loads and appears fine. I can click next and previous through the slider all the way around. The first time I click NEXT all through the slider, when I arrive at the video slide, the video will start from the beginning, and the first time I click PREVIOUS to the video slide, even if I have waited a few seconds for the video to start playing, I can see during the transition between the FIRST slide and the LAST slide that the video has progressed, but when the transition ends, the video rewinds to the beginning and plays from there. I have NO afterChange calls in my script.
The second issue I have is responsive. I have a media query in the CSS, if the window is less than 768px wide, the video is set to display: none. I have a jQuery function, if the window is 768px or larger, the media query is nullified and the reloadBGVid() function is called. But no matter how I target the .bgVid, it simply will not play the video again.
The code you posted in your question contains errors and does not work at all.
I cannot find a reason to have both autoplay attribute in video tag and oninit event handler.
Also it is not clear where you're calling reloadBGVid function.
So I'm just leaving for you the snippet below in hope it helps:
$(document).ready(function() {
$("#mySlick").on('init', function(event) {
$(".carousel-item-background .bgVid").each(function(i, e) {
e.play();
});
});
$("#mySlick").slick({
dots: false,
infinite: true,
speed: 1000,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 10000,
arrows: true,
focusOnSelect: true
});
function reloadBGVid() {
$("video.bgVid").each(function(i, e) {
if (e.paused) e.play();
});
}
});
body {background: #259}
#mySlick {width:436px; height:300px; margin: auto}
video {width:426px; height:240px; object-fit:cover}
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<div id="mySlick">
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?1">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?2">
</div>
<div class="item">
<img class="carousel-item-background" src="https://picsum.photos/426/240?3">
</div>
<div class="item">
<div class="carousel-item-background">
<video class="bgVid" muted loop preload>
<source src="http://dash.akamaized.net/akamai/bbb/bbb_1280x720_60fps_6000k.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
Following is my Javascript and Html Slideshow code which start the slide automatically. Now I'm trying to start this slide when Mouse Hover Over on it. But I can't. Is it possible or how can i do this ?
Html Head Section Javascript Code:
<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
</script>
Html Body Section Code:
<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<a href="#"><img src="img/slide-1.jpg" width="570" height="270" alt="Slide
1"></a>
</div>
<div class="slide">
<a href="#"><img src="img/slide-2.jpg" width="570" height="270" alt="Slide
2"></a>
</div>
</div>
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
</div>
Try naming your function (rather than an anonymous $(function(){ ...) then calling it by name in the onmouseover event of one of your divs (either "slides" or "example" or "containiner")
Are you using SlidesJS plugin?
http://www.slidesjs.com/
I am trying to use the demo from this site : http://slidesjs.com/#overview
and try to implement two slider on a page. I am customising the Linking demo.
As i am using two different slider : slider1 and slider2 with different css so I used global.css for slider-1 and created text.css for slider-2. i noticed that the js: slides.min.jquery.js file uses the 'css' element like slides_container, next, prev so i created another js :slider.text.jquery.js replacing the css content by: slides_containerT, nextT, prevT as per text.css. but the code is not working. please help me as my project is due next monday.
Please help to resolve the isse and let me know if more detail is required.
Sorry I tried to add the html, css and jquery code but i was encountering error.
Can you please suggest how what changes I should make to the js : slides.min.jquery.js
so that it renders my second slider with css content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="css/new.css">
<link rel="stylesheet" href="css/text.css">
<script src="js/slider/jquery.min.js"></script>
<script src="js/slider/slides.min.jquery.js"></script>
<script src="js/slider/slider.text.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides 1
$('#slides1').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
// Initialize Slides 2
$('#slides2').slides({
preload: true,
preloadImage: 'img/slider/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
<div id="container">
<div id="example">
<div id="slides1">
<div class="slides_container">
<div class="slide">
<img src="img/slider/slide-1.jpg" height="150" style="max-width: 200px" alt="Slide">
<div class="tmpSlideCopy">
<h1>A History of Innovation</h1>
<p>SLIDE 1 </p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-2.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Second Slide</h1>
<p>Slide 2</p>
</div>
</div>
<div class="slide">
<img src="img/slider/slide-3.jpg" height="150" style="max-width: 230px" alt="Slide">
<div class="tmpSlideCopy">
<h1>Third Slide</h1>
<p>Slide 3</p>
</div>
</div>
</div>
<img src="img/slider/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
<img src="img/slider/arrow-next.png" width="24" height="43" alt="Arrow Next">
cheers
pam
You can try this below code.
$(function(){
$("#slides").slides({
container: 'slides_container'
});
});
Where container is the "css" style.
.slides_container {
width:570px;
height:270px;
}
More information on various property and styling at http://slidesjs.com/#docs