We Keep Coding

Javascript Slideshow slides overlapping when auto play

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/

Issue with scroll animation on load

This is the fiddle I have used on my website.
Everything is fine except the image jerks on load when viewing on Mozilla.
Can anyone assist?
Thanks in advance.
<script>
var imgCounter = 0;
$(document).ready(function () {
var pictureCount = $('#container img').length;
var scrollResolution = 50;
animateHorse();
function animateHorse() {
var currentScrollPosition = window.pageYOffset;
var imageIndex = Math.round(currentScrollPosition / scrollResolution);
if (imageIndex >= pictureCount) {
imageIndex = pictureCount - 1; // Select last image
}
else{
//imageIndex = 0;
}
console.log(imageIndex);
//if($("#container img").is(":visible"))
$("#container img").hide();
$("#container img").eq(imageIndex).show();
$("#container").css("position","relative");
$("#container").css("margin-bottom","150px");
$(".lastdivcar").css("display","none");
}
$(document).bind('scroll', function() {
animateHorse();
});
});
</script>

Reset timer when using prev next on a slideshow

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);
})()

Same javascript twice cause the conflict on the slider

I'm trying to make an image slider and text slider on same page using same JavaScript. But some how it doesn't work properly as expected. I research some about this but only thing I found is to use no-conflict but it doesn't work either. When I exclude number-1 JavaScript code the number-2 slider works properly but when I include number 1 slider number 2 doesn't work properly. Is there a way I can avoid conflicting each other ? if so then how can I do this ? Here is my JavaScript code:
<script> //number-2
sliderInt = 1;
sliderNext = 2;
$(document).ready(function() {
$('#slider > img#1').fadeIn(150);
startSlider();
})
function startSlider() {
count = $('#slider > img').size();
loop = setInterval(function() {
if(sliderNext > count) {
sliderInt = 1;
sliderNext = 1;
}
$('#slider > img').fadeOut(150);
$('#slider > img#' + sliderNext).fadeIn(150);
sliderInt = sliderNext;
sliderNext = sliderNext + 1;
}, 3000);
}
function prev() {
newSlide = sliderInt - 1;
showSlide(newSlide);
}
function next() {
newSlide = sliderInt + 1;
showSlide(newSlide);
}
function stopLoop() {
window.clearInterval(loop);
}
function showSlide(id) {
stopLoop();
if(id > count) {
id = 1;
}else if(id < 1) {
id = count;
}
$('#slider > img').fadeOut(150);
$('#slider > img#' + id).fadeIn(150);
sliderInt = id;
sliderNext = id + 1;
startSlider();
}
$('#slider > img').hover(
function() {
stopLoop();
},
function() {
startSlider();
}
// In the End of the line don't put comma ','
);
</script>
<script> //number-1
textsliderInt = 1;
textsliderNext = 2;
$(document).ready(function() {
$('#slider_text > p#1').fadeIn(300)
textsliderStart();
})
function textsliderStart() {
count = $('#slider_text > p').size();
loop = setInterval(function() {
if(textsliderNext > count) {
textsliderInt = 1;
textsliderNext = 1;
}
$('#slider_text > p').fadeOut(300);
$('#slider_text > p#' + textsliderNext).fadeIn(300);
textsliderInt = textsliderNext;
textsliderNext = textsliderNext + 1;
}, 3000)
}
</script>

Put var in front of count = $('#slider_text > p').size(); and loop = setInterval(function() {
When you dont use var you declare count and loop at the global scope

I want to create image gallery with infinite loop using jquery

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.