Ok so , i'm trying to build a custom slideshow with javascript, but i would like to put a custom pause interval for each slide .
let's say i have a slideshow with 3 slides i want it to be like :
30 seconds 8 sec 8 sec
|-------------------|------|-------|
slide 1 slide2 slide3
I want to be able to give a function a list of intervals [5 , 10 , 20] and shuffles a list of slides using that interval list.
I did try to solve this using setInterval with fun , but unfortunately it'sctions calling the next function but as you know it's not scalable to many slides,
Code
// slid is a class having all slides
function bringback() {
slid.goToSlide(0);
}
function bringback2() {
slid.goToSlide(2);
setTimeout( bringback, 8000 );
}
$(document).ready(function(){
setInterval(function(){
slid.goToSlide(1);
setTimeout( bringback2, 8000 );
}, 30000);
});
Use setTimeout:
;(function(){
var intervals = [5,10,20];
(function update(next){
// Pick a slide and update the slideshow here
setTimeout(function(){
update((next + 1)%intervals.length);
}, intervals[next]*1000);
})(0);
})();
Demo
You could make it choose a random slide or just iterate through the slides in order, like so:
;(function(){
var intervals = [5,10,20];
(function update(next){
slid.goToSlide(next);
setTimeout(function(){
update((next + 1)%intervals.length);
}, intervals[next]*1000);
})(0);
})();
Related
Actually , i'm designing an autoplay slider using vanilla javascript . so there are two functions , one will play the forward slider while other reverse . When i'm on the last item in the forwardslider , i want to clear the interval and start the reverse slider and vice versa when im on the reverse slider's last item , i want to clear the interval and start the forward slider . But the intervals are not being cleared and once it switches to the reverse slider and keeps on running both the intervals
function sliderForwardAutoplay(){
var Fid = setInterval(()=>{
var currentSlider = document.querySelector('.current-slider');
if(parseInt(currentSlider.dataset.num)===2){
clearInterval(Fid);
sliderReverseAutoplay();
}
// alert(currentSlider.dataset.num+1);
// currentSlider.classList.add('swipe-left');
getSliderLayer(parseInt(currentSlider.dataset.num)+1).classList.add('swipe','current-slider');
setInterval(()=>{
getImgLayer(parseInt(currentSlider.dataset.num)+1).classList.add('left-0');
},500);
currentSlider.classList.remove('current-slider');
},5000);
}
function sliderReverseAutoplay(){
var Rid = setInterval(()=>{
var currentSlider = document.querySelector('.current-slider');
if(parseInt(currentSlider.dataset.num)===0){
clearInterval(Rid);
sliderForwardAutoplay();
}
// alert(currentSlider.dataset.num+1);
// currentSlider.classList.add('swipe-left');
getSliderLayer(parseInt(currentSlider.dataset.num)).classList.add('swipe-right');
getSliderLayer(parseInt(currentSlider.dataset.num)-1).classList.add('current-slider'); currentSlider.classList.remove('current-slider');
},5000);
}
I made a website where I need to animate strings that are longer than the containing parent.
This is the website: Here
If you click on next, you can see multiple pages of breeders with long names, that need to animate from left to right, but this only happens after 10 or 15 seconds and it takes a long time for it to start.
Now I have checked my code and this is where I create my functions:
function newsTicker() {
console.log('newsTicker')
verifyLength();
$('.breeder').not('.short-breed-name').each(function() {
var breederNameWidth = $(this).find('.breeder_name').width();
var divBreederNameWidth = $(this).find('.breeder_name_div').width();
var diff = Math.max(parseInt(breederNameWidth - divBreederNameWidth),0);
// console.log('diff:',diff)
$(this).find('.breeder_name').animate({
marginLeft: -diff
}, 3000,
function(){
$(this).animate({
marginLeft : 0
},3000)
})
})
}
function verifyLength() {
// console.log('verifyLength')
$('.breeder.visible').each(function() {
// debugger
var breederNameWidth = $(this).find('.breeder_name').width() + 10;
var divBreederNameWidth = $(this).find('.breeder_name_div').innerWidth();
if(breederNameWidth < divBreederNameWidth) {
$(this).addClass('short-breed-name');
$(this).find('.breeder_name').css({'width':'100%','text-align':'center'})
}
})
}
And this is where I call newsTicker:
function breederAnimate(){
verifyLength();
newsTicker();
setInterval(newsTicker, 1000);
}
Why is it so slow when my times are between 1 and 3 seconds?
You should be calling setTimeout not setInterval because you only want your animation to run once. You're restarting your animations every second
Also, you should be cancelling existing setIntervals when you click next or previous
Hi Friends I've created a flip effect which is working fine on mouse hover(). I've 12 div's with class .hover and I've also develop a setInterval() function to generates a random number from 1 to 12 to get a eq() of any particular div to flip after every 3 seconds.
Now the problem is I want setInterval function to stop working if I hover any of the div which has class .hover
My jQuery code is below
setInterval(function(){
if($('.hover').is(':hover') == true)
{
$('.hover').removeClass('flip');
$(this).addClass('flip');
}
else{
var randomNum = Math.ceil(Math.random()*12); /* Pick random number between 1 and 2 */
$('.hover').removeClass('flip');
$('.hover').eq(randomNum).addClass('flip');
}
},200)
Please guys help me out
Thanks in advance .. :)
Try this.
var interval;
function initEffect(){
interval = setInterval(function(){
var randomNum = Math.ceil(Math.random()*12); /* Pick random number between 1 and 2 */
$('.hover').removeClass('flip');
$('.hover').eq(randomNum).addClass('flip');
},200);
}
$('.hover').hover(function(e){
clearInterval(interval);
$('.hover').removeClass('flip');
$(this).addClass('flip');
});
$('.hover').mouseout(function(e){
initEffect();
});
Try to use clearInterval like,
var clrInt = null;
function fliping(){
clrInt = setInterval(function(){
var randomNum = Math.ceil(Math.random()*12); /* Pick random number between 1 and 2 */
$('.hover').removeClass('flip');
$('.hover').eq(randomNum).addClass('flip');
},200);
}
fliping();
$(document).on('mouseenter','.hover',function(){
$('.hover').removeClass('flip');
$(this).addClass('flip');
clearInterval(clrInt);
}).on('mouseleave','.hover',function(){ // again flip on mouse leave
fliping();
});
I recently modified the SquareSlider (http://gilbert.pellegrom.me/recreating-the-square-slider) so that a client could have an AutoRotator on their promos, along with this they wanted the rotator to stop if somebody was hovering over it. By default the scroller rotates every 4 seconds.
// Automatic Rotation
var autoScroller = function(){
slides.removeClass('active');
currentSlide++;
if(currentSlide > slides.length - 1) currentSlide = 0;
$(slides[currentSlide]).addClass('active');
};
// Pause the Rotation on Hover, resume when not hovering
$('.square-slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval( autoScroller, 4000);
});
However, after adding in the pause-on-hover it no longer autorotates when the page loads, in order to trigger the rotating you have to hover over the slider first. Any help would be greatly appreciated in getting it to AutoRotate on pageload instead of having to hover first.
Here's a link to a jsFiddle where I have recreated it.
If you load the page no autoRotating will happen until you hover over the slider first.
http://jsfiddle.net/dylanbaumann/RSP2z/
Two things:
1) Need to initialize the timer. Abraham had this one.
2) Right now your hover will affect all slideshows on the same page.
//declare the timer
var timer = setInterval( autoScroller, 4000);
//use the already defined slider variable instead of selecting all sliders
slider.hover(function(){
clearInterval(timer);
}, function(){
timer = setInterval( autoScroller, 4000);
});
you can do
var timer = setInterval( autoScroller, 4000);
// BELOW THIS COMMENT IS THE ISSUE
$('.square-slider').hover(function(ev){
clearInterval(timer);
}, function(ev){
timer = setInterval( autoScroller, 4000);
});
http://jsfiddle.net/RSP2z/6/
You have to define timer before clearing it. i.e. var timer = setInterval(autoScroller,4000);
Hope this helps.
What I'm trying to accomplish is a slideshow that has one slide that lasts 10 seconds-- while all other slides in the slideshow last 4 seconds. In my code below, the current.id==1 condition is my first slide. When the DOM loads, it checks what slide is first, and if it's current.id==1, it makes all transitions 10 seconds. Which isn't exactly what I want. Any suggestions how I could get the all other slides to interval every 4 seconds and still keep my main slide lasting 10 seconds every time it flips back to that slide?
Sorry if that is a bit confusing. Thanks for the help guys!
/* Setting auto-advance every 10 seconds for main slide, 4 seconds for all others */
var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
auto=setInterval(function(){
next();
},10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
auto=setInterval(function(){
next();
},4*1000);//4 seconds each other slide.
}
I write my JS like this. It makes it far more readable in my opinion and really helps Though normally I don't include comments like this
Your next() function should call itself
$(document).ready(function () {
var Page = {};
Page.slider = (function () {
return {
init: function () {
setTimeout(function () {
Page.slider.nextSlide();
}, 10*1000);
},
nextSlide: function () {
var duration = 4;
if (Page.slider.isShowingFirst()) {
duration = 10;
}
//code to handle transitioning slides
setTimeout(function () {
Page.slider.nextSlide();
}, duration*1000);
},
isShowingFirst: function () {
//return boolean on whether it's showing the first slide or not
}
}
})();
Page.slider.init();
});
You can't use setInterval() if you want a varying interval because you only call it once and then it runs repeatedly with the same interval until you stop it. You could use setTimeout() on each slide like this:
if (current.id == 1) { //this is the only slide I want lasting 10 seconds.
setTimeout(next, 10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
setTimeout(next, 4*1000);//4 seconds each other slide.
}
P.S. You may also want to notice that you don't need an anonymous function for setTimeout() or setInterval() if all you want it to do is call a function you already have defined as in this example.
You should use setTimeout instead of setInterval.
var auto;
if (current.id==1) { //this is the only slide I want lasting 10 seconds.
auto=setTimeout(function(){
next();
},10*1000); //10 seconds for MAIN slide
} else { // all other slides should interval every 4 seconds.
auto=setTimeout(function(){
next();
},4*1000);//4 seconds each other slide.
}