I have a slideshow with two slides. Each slide holds for 5-6 secs before changing but when I use the prev next buttons it doesn't work well. Somehow it keeps the original timer (from the autoslide) so when I select "next" ,for example 1 sec before the transition then the next slide will stay for just one sec. So when I select next it doesn't reset the timer and instead keeps the original timer.
So in conclusion I want to reset timer within prev next functions (Or if you have any other ideas will be appreciated).
This is the JS:
"use strict";
var currentSlide = 1;
var transition = 1000;
var slideLength = 2;
var slideInter = 6000;
$(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
$(".next").click(function () {
nextSlide();
});
$(".prev").click(function () {
prevSlide();
});
function nextSlide() {
$(".slider ul li:nth-child(" + currentSlide + ")").fadeOut(transition);
currentSlide++;
if (currentSlide > slideLength)
currentSlide = 1;
$(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
}
function prevSlide() {
$(".slider ul li:nth-child(" + currentSlide + ")").fadeOut(transition);
currentSlide--;
if (currentSlide < 1)
currentSlide = 2;
$(".slider ul li:nth-child(" + currentSlide + ")").fadeIn(transition);
}
//UPDATED CODE
var timer = setInterval(nextSlide, slideInter);
function resett() {
clearInterval(timer);}
function timing () {
timer = setInterval(nextSlide, slideInter);}
$(".slider").hover(resett,timing);
Let me know if you need any additional information or if you didn't understand something from what I said.
It looks like your timer and the clearInterval are declared and managed under "hover," and aren't called when you trigger nextSlide or prevSlide. Try declaring this as a separate, global function and then call it from within your nextSlide or prevSlide functions so it will reset the timer accordingly when these are run.
Have you tried self-calling recursive functions? It might be a decent work-around.
Something like this:
var isBeingHovered = false;
$('.slider').hover(function(){
isBeingHovered = true;
}, function(){
isBeingHovered = false;
setTimeout(timerFunction, slideInter); //Optional. Resume when stops hovering.
});
(function timerFunction(){
nextSlide();
if(isBeingHovered === true)
setTimeout(timerFunction, slideInter);
})()
Related
I was making this automatic slideshow and it got this issue. I got 4 slides. When autoplay the first time it's overlapping the slide 4 with slide 2 and 3, it's only happen one time after site load. when the slideshow goes for the second time and when I use the dots in the bottom it's working perfectly fine without any issues.
$(document).ready(function(){
$("#slideshow > div:gt(0)").hide();
var slidesl = $('.slideitem').length
var d = "<li class=\"dot active-dot\">•</li>";
for (var i = 1; i < slidesl; i++) {
d = d+"<li class=\"dot\">•</li>";
}
var dots = "<ul class=\"slider-dots\">" + d + "</ul\>";
$("#slideshow").append(dots);
$("#slideshow > div:gt(0)").hide();
var interval = setInterval(slide, 3000);
function intslide(func) {
if (func == 'start') {
interval = setInterval(slide, 3000);
} else {
clearInterval(interval);
}
}
function slide() {
sact('next',0, 1200);
}
function sact(a, ix, it) {
var currentSlide = $('.current');
var nextSlide = currentSlide.next('.slideitem');
var prevSlide = currentSlide.prev('.slideitem');
var reqSlide = $('.slideitem').eq(ix);
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
var prevDot = currentDot.prev();
var reqDot = $('.dot').eq(ix);
if (nextSlide.length == 0) {
nextDot = $('.dot').first();
nextSlide = $('.slideitem').first();
}
if (prevSlide.length == 0) {
prevDot = $('.dot').last();
prevSlide = $('.slideitem').last();
}
if (a == 'next') {
var Slide = nextSlide;
var Dot = nextDot;
}
else if (a == 'prev') {
var Slide = prevSlide;
var Dot = prevDot;
}
else {
var Slide = reqSlide;
var Dot = reqDot;
}
currentSlide.fadeOut(it).removeClass('current');
Slide.fadeIn(it).addClass('current');
currentDot.removeClass('active-dot');
Dot.addClass('active-dot');
}
$('.next').on('click', function(){
intslide('stop');
sact('next', 0, 400);
intslide('start');
});//next
$('.prev').on('click', function(){
intslide('stop');
sact('prev', 0, 400);
intslide('start');
});//prev
$('.dot').on('click', function(){
intslide('stop');
var index = $(this).index();
sact('dot', index, 400);
intslide('start');
});//prev
//slideshow
});
Here is the fiddle - https://jsfiddle.net/Udara_Samapth/c1zevrLj/23/
There are multiple things I noticed which are making your slides overlapping. Looking at your jquery/JS in a first place you are using jquery hide method but inside function sact() you are using fadeIn() and fadeOut() functions which adds opacity classes.
currentSlide.fadeOut(it).removeClass('current');
Slide.fadeIn(it).addClass('current');
That makes top and bottom items to start mixing at some point of opacity.
To handle this there are two solutions in my mind right now.
The easiest one is to add background color to item.
.slideshow .slideitem {
display: none;
background: #FFF;
}
Another effort is to control opacity timings which needs some work on your JS portion. you can do that by adding delay on fadeIn() and fadeOut() functions.
Here is the working link for you.
https://jsfiddle.net/liquidcharcoal/gqyjph1a/13/
can anyone explain how to make this slider loop automatically as well?
Here is only the javascript for simplicity:
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
setTimeout(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
}, 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', function(){
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
})
Just move your sliding function out into it's own function, use setInterval instead of setTimeout to loop the transition, and then move that sliding function into that setInterval. Here is the JS:
var loopInterval;
$(document).ready(function(){
for (var i=1; i <= $('.slider__slide').length; i++){
$('.slider__indicators').append('<div class="slider__indicator" data-slide="'+i+'"></div>')
}
loopInterval = setInterval(function(){
$('.slider__wrap').addClass('slider__wrap--hacked');
slidingFunction();
}, 10 * 1000);
})
function goToSlide(number){
$('.slider__slide').removeClass('slider__slide--active');
$('.slider__slide[data-slide='+number+']').addClass('slider__slide--active');
}
$('.slider__next, .go-to-next').on('click', nextClick)
function slidingFunction() {
var currentSlide = Number($('.slider__slide--active').data('slide'));
var totalSlides = $('.slider__slide').length;
currentSlide++
if (currentSlide > totalSlides){
currentSlide = 1;
}
goToSlide(currentSlide);
}
function nextClick(){
clearInterval(loopInterval);
loopInterval = setInterval(slidingFunction, 10 * 1000);
slidingFunction();
}
Here is a codepen: https://codepen.io/nick-siegmundt/pen/MWwQgVr
I am currently a starter in query and trying to make a carousel, it works so far, but continues on after the slides and refuses to reset to the first slide after all slides have been moved, means my margin goes into endless numbers. This is what I have so far:
`
var timeout;
var currentSlide = 1;
var slideWidth = $('.slide').width();
var slideGroup = $('#slider').children('.slide-group');
var slides = $(slideGroup).find('.slide');
var hmm = $(slides).length;
console.log(hmm);
function move(newSlide) {
autoMove();
if($(slideGroup).is(':animated') || currentSlide === newSlide) {
return;
}
if(newSlide > currentSlide) {
$(slideGroup).animate({'margin-left': '-='+slideWidth}, 1000);
}
if(newSlide === 0) {
$(slideGroup).css({'margin-left': 0});
}
};
function autoMove(){
clearTimeout(timeout);
timeout = setTimeout(function(){
if(currentSlide < ($(slides).length -1)){
move(currentSlide +1)
}if(currentSlide > ($(slides).length -1)) {
move(0);
}
}, 4000);
}
move();`
I've created my own image/div slider from a tutorial on youtube and it works the way it should based on the code, however, I noticed that since they use the fadeOut() then fadeIn() commands, a white flash appears (because the background is white) in between the fades. Is there anyway someone can add something to the code to make it so that it Crossfades instead? What I mean is that the next image fades in but the previous image doesnt disappear yet, but still loops? Here's the code:
sliderInt = 1;
sliderNext = 2;
$(document).ready(function() {
startSlider();
});
function startSlider() {
count = $("#slider > .bg").size();
loop = setInterval(function() {
if(sliderNext > count) {
sliderNext = 1;
sliderInt = 1;
}
$("#slider > .bg").fadeOut(300);
$("#slider > .bg#" + sliderNext).fadeIn(300);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 6000);
}
Cross fading is done by fading in while already having an image below the faded in image.
sliderNext = 1;
$(document).ready(function() {
startSlider();
});
var to_img;
function startSlider() {
count = $("#slider > .bg").size();
loop = setInterval(function() {
if(sliderNext > count) {
sliderNext = 1;
}
$("#slider > .bg").css('z-index', 0);
if (to_img != null)
to_img.css('z-index', 1)
to_img = $("#slider > .bg#" + sliderNext);
to_img.css('opacity', 0).css('z-index', 2).fadeIn(300);
sliderNext = sliderNext + 1;
}, 6000);
}
I want to create an image gallery, I wrote for a slideshow, but I don't know how to code for the previous and next buttons. These should work like an infinite loop (last image jumps back to the first).
How should I get started? This is what I have so far:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#play").click(function () {
$("#img1").fadeOut(2000);
$("#img2").fadeIn();
$("#img2").fadeOut(4000);
$("#img3").fadeIn();
});
});
</script>
<body>
<div id=outer>
<div id=inner>
<img id="img1" src="img1.jpg"/>
<img id="img2" src="img2.jpg" style="display:none"/>
<img id="img3" src="img3.jpg" style="display:none"/>
</div>
<div id=button>
<button id="bwd"><<</button>
<button id="play"><></button>
<button id="fwd">>></button>
</div>
</div>
</body>
You can use setInterval() .
This link can help you to understand much more
Call function with setInterval in jQuery?
may be this can help you too :
http://jquery.malsup.com/cycle/
you're going to want to use the javascript timing function. Something like:
$('#play').click(function(){
window.setInterval(function(){
if($('#img1').is(:visible)){
$("#img2").show()
$("#img1").hide()
}
if($('#img2').is(:visible)){
$('#img3').show()
$('#img2').hide()
}
if($('#img3').is(:visible)){
$('#img1').show()
$('#img3').hide()
}
}, 1000);
});
You can also condense this logic down, but this gets you the basic idea. Then if you look carefully the functions for next is already in the code and it can be extracted out and reuses. Once you have the next function it's pretty straight forward that the back function will be the exact opposite.
To answer your question below you can change the img's to have the same class and then apply show and hide based on which one is visible and the image immediately after the visible one:
#find the one currently being shown
$(".images:visible")
#find the one after the visible one
$(".images:visible").next()
#keep an id on the last image so that you can do something like
if($('.images:visible') == $('#last_image')){
$('.images').first().show()
}
Hi i have created Carousel without using any third party plugin.If you want please refer.Reference Link
Js Code is.
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 300;
var slides = $('.slide');
var numberOfSlides = slides.length;
var timer = 3000;
var img1, img2;
var sliderLink = $("#slider a");
var direction = 1;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner // Float left to display horizontally, readjust .slides width
slides.wrapAll('<div id="slideInner"></div>').css({
'float': 'left',
'width': slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert left and right arrow controls in the DOM
$('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');
// Hide left arrow control on first load
// manageControls(currentPosition);
// manageSlide();
// Create event listeners for .controls clicks
$('#rightControl').bind('click', rightControl);
$('#leftControl').bind('click', leftControl);
function leftControl() {
var butonid = 0;
direction = 0;
$("#slideInner").stop();
$("#slideInner").dequeue();
$('#timer').stop();
$('#timer').dequeue();
$('#leftControl').unbind('click');
manageSlide(0, direction);
setTimeout(function () {
$('#leftControl').bind('click', leftControl);
}, timer, null);
}
function rightControl() {
var butonid = 1;
direction = 1;
$("#slideInner").stop();
$("#slideInner").dequeue();
$('#timer').stop();
$('#timer').dequeue();
$('#rightControl').unbind('click');
manageSlide(0, direction);
setTimeout(function () {
$('#rightControl').bind('click', rightControl);
}, timer, null);
}
var slideIndex = 0;
var data = $("#slideInner .slide").toArray();
$("#slideInner").empty();
function manageSlide(auto, idButtonid) {
$("#slideInner").empty();
// console.log(slideIndex);
if (idButtonid == 0) {
$("#slideInner").css({ 'marginLeft': "-300px" });
$(data).each(function (index) {
// if (index == slideIndex - 1) {
// $(this).show();
// } else {
$(this).hide();
// }
});
$(data[slideIndex - 1]).show();
if (slideIndex == numberOfSlides - 1) {
slideIndex = 0;
img1 = data[0];
img2 = data[numberOfSlides - 1];
$("#slideInner").append(img1);
$("#slideInner").append(img2);
$(img2).show();
$(img1).show();
} else {
img1 = data[slideIndex];
img2 = data[slideIndex + 1];
$("#slideInner").append(img2);
$("#slideInner").append(img1);
$(img1).show();
$(img2).show();
slideIndex = slideIndex + 1;
}
$('#slideInner').animate({
'marginLeft': "0px"
}, 'slow', function () {
$('#timer').animate({
opacity: 1
}, timer, function () {
console.log('leftControl');
manageSlide(1, direction);
});
});
}
// right move here
else if (idButtonid == 1) {
$("#slideInner").css({ 'marginLeft': "0px" });
$(data).each(function (index) {
if (index == slideIndex + 1) {
$(this).show();
} else {
$(this).hide();
}
});
if (slideIndex == numberOfSlides - 1) {
slideIndex = 0;
img1 = data[0];
img2 = data[numberOfSlides - 1];
$("#slideInner").append(img2);
$("#slideInner").append(img1);
$(img2).show();
$(img1).show();
} else {
img1 = data[slideIndex];
img2 = data[slideIndex + 1];
$("#slideInner").append(img1);
$("#slideInner").append(img2);
$(img1).show();
$(img2).show();
slideIndex = slideIndex + 1;
}
$('#slideInner').animate({
'marginLeft': slideWidth * (-1)
}, 'slow', function () {
console.log('rightControl');
$('#timer').animate({
opacity: 1
}, timer, function () {
manageSlide(1, direction);
});
});
}
if (auto == 1) {
sliderLink.each(function () {
$(this).removeClass();
if ($(this).text() == (slideIndex + 1)) {
$(this).addClass('active');
}
});
}
auto = 1;
}
$("#slider a").click(function () {
sliderLink.each(function () {
$(this).removeClass();
});
slideIndex = $(this).addClass('active').text() - 1;
$('#timer').stop();
$('#timer').dequeue();
$("#slideInner").stop();
$("#slideInner").dequeue();
manageSlide(0, direction);
});
manageSlide(1, direction);
});
Demo Link
Hope it helps you.