We Keep Coding

In slider when move to next slide video of that slide freezes

Hi i made a slider which is sliding to the next slide based on the duration of the video but the catch is that all of those videos are playing at once thats why when we move from 1st slide to 2nd slide after the duration ends we can see the freezing of that video maybe because the duration of that video already ended. since its not in loop so thats y it stops there ( however it works when i add loop keyword in video element in HTML but not a proper solution to it )
but wherever you're on the slide other than slide 1 when you jump back to slide 1 either by dragging or clicking thumbnail it always plays from the start
Idk how but the 1st slide works
Goals we have to achieve:
slide should play from start when its on screen
Codepen Link
// Just for codepen clear the console between refreshes
// gsap.registerPlugin(SplitText, Draggable);
document.querySelectorAll(".slider").forEach((container) => {
// Setup variables
const items = container.querySelectorAll(".slide"),
itemsMax = items.length - 1;
const thumbnail = container.querySelector(".thumbnails");
const video = document.querySelector(".slide__figure__video");
let index = 0;
const move = 100;
const timer = video.duration * 1000;
const duration = 0.5;
let autoplay;
//--------------------------------//
// 💾 Inital setup
//--------------------------------//
function init() {
// Create 🟣 Dots
items.forEach((item, index) => {
const number = document.createElement("button");
number.innerHTML = index + 1;
if (index === 0) number.classList.add("active"); // Set the first dot to active
// Allow clicking the dots
number.addEventListener("click", () => {
slideLogic(false, index);
});
if (thumbnail) thumbnail.appendChild(number);
});
// Animate the first element in
gsap.set(items, { autoAlpha: 0 });
gsap.set([".slider", items[index]], { autoAlpha: 1 });
gsap.from(items[index], { autoAlpha: 0, x: move });
autoplay = window.setTimeout(slideLogic, timer);
}
// Run inital setup
init();
// END 💾 Inital setup --------------//
//--------------------------------//
// ☝️ Touch
//--------------------------------//
if (window.Draggable) {
Draggable.create(items, {
type: "x", // Drag only on the X axis
zIndexBoost: false,
onDragStart: function () {
window.clearTimeout(autoplay); // disable autoplay
slideLogic(this.getDirection() === "right" ? true : false);
}
});
}
// END ☝️ Touch --------------//
//--------------------------------//
// Set active 🟣 dot
//--------------------------------//
function dotActive(index) {
const dotsAll = thumbnail.querySelectorAll("button");
dotsAll.forEach((dot) => {
dot.classList.remove("active");
});
dotsAll[index].classList.add("active");
}
// END Set active 🟣 dot --------------//
//--------------------------------//
// 🖼️ Slide animation
//--------------------------------//
function slideAnimation(index, moveIn, outIn) {
// Reset the properties you are animating below
// Ohter wise they animate from that positon (probalby not visable)
gsap.set(items, { xPercent: 0, scale: 1 });
gsap.set(items[moveIn], { autoAlpha: 1 });
const text = new SplitText(items[moveIn].querySelector("h1"), {
type: "chars"
});
video.load();
// The animation
const tl = gsap.timeline({
defaults: {
duration: duration
},
onStart: animationStart,
onComplete: animationDone
});
// Move out slide
tl.to(items[index], { xPercent: outIn[0] });
// move in slide
tl.from(items[moveIn], { xPercent: outIn[1] }, "<");
// Animate text
tl.set(items[index], { autoAlpha: 0 }); // Hide moved out slide
}
function animationStart() {
container.classList.add("running");
video.load();
}
function animationDone() {
autoplay = window.setTimeout(slideLogic, timer);
container.classList.remove("running");
gsap.set(items, { x: 0 });
}
// END 🖼️ Slide animation --------------//
//--------------------------------//
// Slider 🎛️ logic
//--------------------------------//
function slideLogic(prev, customMoveIn) {
window.clearTimeout(autoplay); // disable autoplay
let outIn = [-move, move];
if (prev) outIn.reverse();
let moveIn;
// Check if moveIn is passed with the function
if (typeof customMoveIn === "undefined") {
if (prev) {
moveIn = index === 0 ? itemsMax : index - 1;
} else {
moveIn = index === itemsMax ? 0 : index + 1;
}
} else {
moveIn = customMoveIn;
}
if (thumbnail) dotActive(moveIn); // Set active dot
slideAnimation(index, moveIn, outIn); // Animation function
// Changing the next index
if (typeof customMoveIn === "undefined") {
if (prev) {
index === 0 ? (index = itemsMax) : index--;
} else {
index === itemsMax ? (index = 0) : index++;
}
} else {
index === itemsMax ? (index = 0) : (index = customMoveIn++);
}
}
});

fullpage.js onLeave not firing the delayed scroll after the first time

So basically, I'm working on a website that needs to have fullpage.js working.
After the first section, I have 3 similar in structure sections, where some visual elements are fixed (which aren't part of those sections in the HTML tree), and other elements that pretty much stay on the same spot for these 3 sections.
Now, when we scroll in each of these 3 sections, there needs to be a delayed scroll for an "leaving" animation to happpen on the elements before the next section enters and takes its place.
I've got this part working as intended as you can see in the code below, but when you scroll up or down and the animation class is removed and back on again the delay isn't firing again.
Anyone has any idea how I can manage to make this animation fire every single time?
const delay = 1000;
let timeoutId;
let animationIsFinished = false;
const roseTxt = document.querySelectorAll('.smart-rose');
const smartIllus = document.querySelector('.cc-smart-illustration');
const smartTitle = document.querySelector('.cc-smart-title');
new fullpage('#fullpage', {
//options here
css3: true,
scrollHorizontally: true,
scrollBar: true,
scrollOverflow: true,
normalScrollElements: '.scrollable-content',
fitToSection: true,
fitToSectionDelay: 1000,
onLeave: function (origin, destination, direction) {
var curTime = new Date().getTime();
if (origin.index == 1 && direction == 'up') {
for (var i = 0; i < roseTxt.length; i++) {
roseTxt[i].classList.remove('ccsAnimate');
}
smartIllus.classList.remove('ccAnimate');
smartTitle.classList.remove('ccAnimate');
return true;
}
if (origin.index == 1 && direction == 'down') {
//animating my element
for (var i = 0; i < roseTxt.length; i++) {
roseTxt[i].classList.add('ccsAnimate');
}
smartIllus.classList.add('ccAnimate');
smartTitle.classList.add('ccAnimate');
//roseTxt.classList.add('ccsAnimate');
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
animationIsFinished = true;
fullpage_api.moveTo(destination.index + 1);
}, delay);
return animationIsFinished;
}
if (origin.index == 2 && destination.index == 1) {
for (var i = 0; i < roseTxt.length; i++) {
roseTxt[i].classList.remove('ccsAnimate');
}
smartIllus.classList.remove('ccAnimate');
smartTitle.classList.remove('ccAnimate');
}
},
});
Thanks in advance!

Jquery play video or image in div with interval

I have a jQuery array. What I want to do is fetch an image or video and play it until the specified interval and then play next video or image:
Here is my code:
var side_block_src= [{media:'images/172422009.jpg',interval:10},
{media:'images/172422001.jpg',interval:50},
{media:'images/172422009.jpg',interval:4}
];
var sec = 0;
for(var i = 0; i < side_block_src.length; i++) {
console.log('start');
sec = side_block_src[side_block_src].interval*1000;
setTimeout(function(){
$('#setdata>iframe').attr('src',side_block_src[side_block_src].media);
},sec);
}
Why is it not working?
Update
I made it more simple here is the working code
var i = 0;
show_next(i);
function show_next(i){
if(i <= side_block_src.length - i ){
$('#setdata>iframe').attr('src',side_block_src[i+1].media);
setTimeout(function(){
show_next(i + 1)
}, side_block_src[i+1].interval * 1000);
} else {
i=0;
show_next(i);
}
}

You can use
anything slider jquery plugin for this as below i have used
<script type="text/javascript" src="js/ad/jquery.anythingslider.js"></script>
<script type="text/javascript" src="js/ad/jquery.anythingslider.fx.js"></script>
<script type="text/javascript" src="js/ad/jquery.easing.1.2.js"></script>
$('#slider').anythingSlider({
autoPlay: true,
animationTime: 600,
//expand : true,
// Autoplay video in initial panel, if one exists
onInitialized: function(e, slider) {
playvid(slider);
},
// pause video when out of view
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof(vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
// play video
onSlideComplete: function(slider) {
playvid(slider);
},
// pause slideshow if video is playing
isVideoPlaying: function(slider) {
var vid = slider.$currentPage.find('video');
return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
}
});
and here is html code for it
<ul id="slider">
<li class="panel5">
<video class="Cmsvideo" controls autoplay>
<source src="PATH_OF_VIDEO" type="video/EXTENTION_OF_VIDEO" >
Your browser does not support the video tag. But you could include an iframe/embeded video here. </video>
</li>
<li><img src="PATH_OF_IMAGE" alt="" /></li>
</ul>

Here is my solution:
var i = -1;
showNext(i);
function showNext(i) {
if (side_block_src.length - i > 1) {
$('#setdata>iframe').attr('src',side_block_src[i+1].media);
setTimeout(function()
{
showNext(i + 1)
}, side_block_src[i + 1].interval * 1000);
}
}

JQuery Slider Help - Mouse-Over event solution

So, what I am seeking is simple in context, but challenging to implement.
I want the hover function to be disabled until the user clicks the play button and then the pause button.
So, basically I would like the mouse-over function of the slider to be void until the user clicks the Un-Mute Button (Play Youtube Button) and then clicks the Mute Button (Pause YT Button). If you go to the JSFiddle you will see that, upon load, if your mouse hovers over the slider and then hovers out ... the slider moves (After 6 sec). I do not want the slider to start until the user starts the Youtube video.
var W = $('#image_rotator').width(),
N = $('#slider .slide').length,
C = 0,
S = 0,
intv;
if (N <= 1) $('#left, #right').hide();
$('#slider').width(W * N);
$('#left, #right').click(function () {
C = (this.id == 'right' ? ++C : --C) < 0 ? N - 1 : C % N;
$('#slider').stop().animate({
left: -C * W
}, 300, function () {
if (C == 0) {
$('#playiunmute').show();
}
if (C == 1) {
$('#left').show();
}
if (C == 1) {
$('#right').show();
}
if (C == 1) {
$('#playiunmute').hide();
}
if (C == 10) {
$('#slider').css("left", "0");
$('#right').click();
}
});
});
function setResetInterval(e) {
var intv = $("#slider");
if (e) {
timer = setInterval(function () {
$('#right').click();
}, 6000);
} else {
clearInterval(timer);
}
}
$("#imute").click(function (e) {
e.preventDefault();
setResetInterval(true);
S = 0;
});
$("#iunmute").click(function (e) {
e.preventDefault();
setResetInterval(false);
S = 1;
});
$("#playiunmute").click(function (e) {
e.preventDefault();
setResetInterval(false);
S = 1;
});
$('#slider, #left, #right, #playiunmute').hover(function (e) {
return (e.type == 'mouseleave' && S != 1) ? setResetInterval(true) : setResetInterval(false);
});
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '460',
width: '1190',
controls: 1,
videoId: 'kDUERmuuogo',
playerVars: {
controls: 0,
showinfo: 0,
modestbranding: 1,
wmode: "opaque",
rel: 0
},
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
player.mute();
event.target.playVideo();
event.target.setPlaybackQuality("hd720");
}
document.getElementById('iunmute').onclick = function (e) {
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
player.playVideo();
player.seekTo(0);
};
document.getElementById('imute').onclick = function (e) {
player.mute();
player.pauseVideo();
};
document.getElementById('playiunmute').onclick = function (e) {
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
player.playVideo();
};
$('#iunmute').click(function () {
$('#imute').show();
});
$('#iunmute').click(function () {
$('#iunmute').hide();
});
$('#imute').click(function () {
$('#playiunmute').show();
});
$('#imute').click(function () {
$('#imute').hide();
});
$('#playiunmute').click(function () {
$('#imute').show();
});
$('#playiunmute').click(function () {
$('#playiunmute').hide();
});
$('#iunmute').click(function () {
$('#left').hide();
});
$('#iunmute').click(function () {
$('#right').hide();
});
$('#playiunmute').click(function () {
$('#left').hide();
});
$('#playiunmute').click(function () {
$('#right').hide();
});

I had a feeling your initial question (Trigger Alert When Slider Moves Left A Certain Amount) was going to bug me until I figured out how to make this work, and I was right! I sat down and figured out a sort of compromise-ish solution. In order to get it to work, I had eliminate the pause button that you added in favor of the normal YouTube player controls instead, because I could attach listeners to them, which resulted in shorter and more-comprehensible code. I tested this pretty thoroughly, and it should accomplish precisely what you were looking for: When the video is paused (or muted; I wasn't sure if you wanted this functionality as well since, although you compared your mute button to YouTube's play/pause buttons in the question, it was still a mute button.), the video will stop and the slider will advance to the next slide. When the interval (or the user manually advancing the slides) eventually causes the slider to return to the video, the video will start again from the beginning, and the interval will be cancelled, so that the only way that the player will advance past the video will be for the user to mute the video. If you don't want the video to start again from the beginning, you can remove the line player.seekTo(0); in the $("#left, #right").click() handler. If you don't want the mute button to cause the slide to change, remove the following interval function:
window.setInterval(function(){
if(player.isMuted()) {
player.pauseVideo();
}}, 100);
As well as both player.unMute(); lines in the $("#left, #right").click() handler.
Below is a portion of the code that I modified/added. I added only this portion in order to prevent my answer from becoming any longer than it had to be (it's already on the longer side as far as answers go). The full code is visible in the Fiddle.
function onPlayerReady() {
player.playVideo();
player.unMute();
player.setPlaybackQuality("hd720");
window.setInterval(function(){
if(player.isMuted()) {
player.pauseVideo();
}}, 100);
}
function onPlayerStateChange() {
if (player.getPlayerState() == 2) {
$("#right").click();
}
}
I hope this is what you're looking for!
http://jsfiddle.net/IronFlare/6o6kL8pf/2/
If you have any questions, feel free to add a comment to this answer.

Autostart jQuery slider

I'm using a script that animates on click left or right to the next div. It currently works fine but I'm looking to add two features to it. I need it to repeat back to the first slide if it is clicked passed the last slide and go to the last slide if click back from the first slide. Also, I'm interested in getting this to autostart on page load.
I've tried wrapping the clicks in a function and setting a setTimeout but it didn't seem to work. The animation is currently using CSS.
Here's the current JS:
<script>
jQuery(document).ready(function() {
var boxes = jQuery(".box").get(),
current = 0;
jQuery('.right').click(function () {
if (current == (-boxes.length + 1)){
} else {
current--;
updateBoxes();
}
console.log(-boxes.length + 1);
console.log(current);
});
jQuery('.left').click(function () {
if (current === 0){
} else{
current++;
updateBoxes();
}
});
function updateBoxes() {
for (var i = current; i < (boxes.length + current); i++) {
boxes[i - current].style.left = (i * 100 + 50) + "%";
}
}
});
</script>
Let me know if I need a jsfiddle for a better representation. So far, I think the code is pretty straightforward to animate on click.
Thanks.

Try
jQuery(document).ready(function () {
var boxes = jQuery(".box").get(),
current = 0,
timer;
jQuery('.right').click(function () {
if (current == (-boxes.length + 1)) {
current = 0;
} else {
current--;
}
updateBoxes();
}).click(); //initialize the view
jQuery('.left').click(function () {
if (current === 0) {
current = -boxes.length + 1;
} else {
current++;
}
updateBoxes();
});
function updateBoxes() {
//custom implementation for testing
console.log('show', current)
$(boxes).hide().eq(-current).show();
autoPlay();
}
function autoPlay() {
clearTimeout(timer);
//auto play
timer = setTimeout(function () {
jQuery('.right').click();
}, 2500)
}
});
Demo: Fiddle

Here's an example based on my comment (mostly pseudocode):
$(function(){
var boxes = $('.box'),
current = 0,
timer;
// Handler responsible for animation, either from clicking or Interval
function animation(direction){
if (direction === 1) {
// Set animation properties to animate forward
} else {
// Set animation properties to animate backwards
}
if (current === 0 || current === boxes.length) {
// Adjust for first/last
}
// Handle animation here
}
// Sets/Clears interval
// Useful if you want to reset the timer when a user clicks forward/back (or "pause")
function setAutoSlider(set, duration) {
var dur = duration || 2000;
if (set === 1) {
timer = setInterval(function(){
animation(1);
}, dur);
} else {
clearInterval(timer)
}
}
// Bind click events on arrows
// We use jQuery's event binding to pass the data 0 or 1 to our handler
$('.right').on('click', 1, function(e){animation(e.data)});
$('.left').on('click', 0, function(e){animation(e.data)});
// Kick off animated slider
setAutoSlider(1, 2000);
Have fun! If you have any questions, feel free to ask!