We Keep Coding

Problem with infinite loop in slider using jQuery

I tried making jQuery slider, which will pause on current image for couple of seconds and then move images horizontally. Also, when slider presents the last image in collection, slider should slowly get back to first image, or when marginLeft attribute reaches value of -200vw(it decreases gradually for -100vw after every image). Most of the time slider works perfectly, but there are also moments when slider ignores my if and goes above -200vw(sometimes up to -3000vw), resulting in showing no images. The only thing that I noticed in this situation is that this problem can occur after around 5-10 minutes spent on other browser tabs.
P.S I apologize for a lack of precise details, because these are the only thing I have noticed with this problem
jQuery/Javascript
$(document).ready(function() {
let delay = 5300;
let currentSlide = 1;
let $carousel = $('#carousel')
let $slideContainer = $carousel.find('.slides');
let $width = 100;
let $slides = $slideContainer.find('.slide')
var interval = setInterval(function() {
$slideContainer.animate({
'marginLeft': '-=' + $width + 'vw'
}, 1000, function() {
currentSlide++;
var abc = $slideContainer.width();
if (currentSlide == $slides.length) {
setTimeout(function() {
$slideContainer.animate({
'marginLeft': '+=' + ($width + 100) + 'vw'
}, 1000, function() {
currentSlide = 1;
$slideContainer.css({
'marginLeft': 0 + 'vw'
})
})
}, (delay / 2.5))
}
})
}, delay);
});
HTML
<section id="carousel">
<div class="slides">
<div class="slide">
<img src="../javaskript/images/slider/gaming1.jpg" style="height:100vh" alt="Introduction image 2 - slider" />
</div>
<div class="slide">
<img src="../javaskript/images/slider/gaming2.jpg" style="height:100vh" alt="Introduction image 2 - slider">
</div>
<div class="slide">
<img src="../javaskript/images/slider/scorn.jpg" style="height:100vh" alt="Introduction image 2 - slider">
</div>
</div>
</section>
CSS
#carousel {
overflow : hidden;
white-space : nowrap;
width : 300vw;
height : 100vh;
}
.slides {
display : flex;
width : 300vw;
margin : 0;
padding : 0;
}
.slide {
width : 100vw;
overflow : hidden;
}

Slideshow wont restart

I am trying to create a slideshow for my website but i have no idea
how to make the array restart. I tried putting a for loop in the function but the page only shows the last image every time it reloads. here is the code:
var i=0;
function myfunc(){
console.log(i);
slideShowImage.src = images[i];
console.log(slideShowImage.src);
/**
if (images[i] =="Mir.jpg"){
link = document.getElementById("slideShowLink");
link.href="http://stackoverflow.com";
}
*/
i = i+1;
}
setInterval(myfunc,5000);

Sounds like you want i to wrap back around to 0 after it hits the last image in images. Try replacing i with i % images.length like so:
var i=0;
function myfunc(){
console.log(i);
slideShowImage.src = images[i % images.length];
console.log(slideShowImage.src);
/**
if (images[i] =="Mir.jpg"){
link = document.getElementById("slideShowLink");
link.href="http://stackoverflow.com";
}
*/
i = i+1;
}
setInterval(myfunc,5000);

I think you are missing a component to your function. I think you need to add to your function:
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
Here is code that I have used to make my own slideshow:
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
The function tells it where to start and that at the end, it needs to go back to the first. This is then incorporated in the setInternal at the end.
Here is the css if you want it:
#slideshow {
position:relative;
height:350px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
And the html:
<div id="slideshow">
<img src="img/img1.jpg" alt="" class="active" />
<img src="img/img2.jpg" alt="" />
<img src="img/img3.jpg" alt="" />
</div>

Improve slide effect

I have created a simple slider
html
<div id="sldvid1" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
<hr>
<div id="sldvid2" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
$
var timer1 = setInterval(runSlide, 1000);
var curnum = 1;
function runSlide()
{
curnum = $(".slider img:visible").attr('picnum');
//$("#sldvid1 img[picnum=" + curnum + "]").fadeOut();
if(curnum == 3){
curnum = 1;
}
else
{
curnum++;
}
// $(".slider img").hide();
//$(".slider img[picnum=" + curnum + "]").show();
$(".slider img").hide();
$(".slider img[picnum=" + curnum + "]").show();
//console.log(curnum);
}
CSS
.slider{
height:50px;
}
Demo
http://jsfiddle.net/mparvez1986/vf401e2y/
Everything is working fine, I just need some one to improve effect so that it could effect like moving from left to right, I tried with some effect, but it seems it required some css manipulation as well
Thanks

I modified your code to create a carousel where images are slid in and out. I accomplished this by animating the margin-left CSS property with jQuery. I specified a size for the .slider class and used overflow: hidden; to ensure the sliding images were not displayed outside of it.
If you wish, you can change the transition effect by changing the CSS property that is animated and ensuring that the elements are in the correct position for the animation before it begins.
You can also change the speed of the animation by changing the magic number 1000 that I've left in the calls to animate. This number is specified in milliseconds.
By the way, I should point out that while custom HTML attributes are allowed in HTML5 they should begin with data-; they are called data attributes.
jsfiddle
HTML
<div id="sldvid1" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
<hr>
<div id="sldvid2" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
CSS
.slider {
position: relative;
width: 50px;
height: 50px;
overflow: hidden;
}
.slider img {
display: none;
width: 100%;
position: absolute;
}
.slider .active {
display: inline-block;
}
.slider .sliding {
display: inline-block;
}
JavaScript
var timer = setInterval(runSlide, 2000);
function runSlide() {
// Slide each slider on the page.
$(".slider").each(function (index, element) {
// Get the elements involved in the slide.
var numChildren = $(this).children().length;
var activeChild = $(this).children(".active");
var activeSlideTo = $(activeChild).attr("data-slide-to");
var nextSlideTo = (parseInt(activeSlideTo) + 1) % numChildren;
var nextChild = $(this).find("*[data-slide-to=" + nextSlideTo + "]");
// Prepare for slide.
$(activeChild).css("margin-left", "0%");
$(nextChild).css("margin-left", "-100%");
$(activeChild).addClass("sliding");
$(nextChild).addClass("sliding");
$(activeChild).removeClass("active");
// Slide using CSS margin-left.
$(activeChild).animate({"margin-left": "100%"}, 1000, function () {
$(this).removeClass("sliding");
});
$(nextChild).animate({"margin-left": "0%"}, 1000, function () {
$(this).addClass("active");
$(this).removeClass("sliding");
});
});
}

Ended with following
setInterval(function() {
$('#sldvid1 > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#sldvid1');
}, 3000);

show images one by one using fadein and fadeout in jquery

Today while creating a slider i stuck in the middle of code that how can i fadein and fadeout the image one by one in jquery. Code i tried so far:-
<head>
<style>
#slideshow{
list-style: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
position:fixed;
}
ul{
list-style-type:none;
}
ul li{
display:inline;
width: 100%;
height: 100%;
position:absolute;
background-size:cover;
background-position:center center;
}
ul li img{
display:none;
}
</style>
</head>
<body>
<ul id="slideshow">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
<script>
window.onload=init;
function init(){
items=$('ul').children('li');
i=0;
item=$(items[i]);
item.css('background-image','url('+ item.find('img').attr('src') +')').fadeOut(1000,function(){
for(i=0;i<items.length;i++){
item=$(items[i]);
item.css('background-image','url('+ item.find('img').attr('src') +')');
}
});
}
</script>
</body>
After showing first image it automatically goes to last image without displaying the second image.
Please help me to rectify this problem.

Here's how you can do it: JSFiddle
function init(){
$("#slideshow li").each(function(index){
this.style.backgroundImage = "url('" + this.children[0].src + "')";
if( index != 0)
this.style.display = "none";
});
setTimeout(changeImage, 4000);
}
function changeImage(){
$curr = $("#slideshow .active");
$next = $("#slideshow .active").next();
if($next[0] === undefined)
$next = $("#slideshow li").eq(0);
$curr.fadeOut(1000, function(){
$next.fadeIn(1000, function(){
$curr.removeClass("active");
$next.addClass("active");
setTimeout(changeImage, 4000); //change image every 4 seconds
});
});
}
$(document).ready(init);

You need to use the setInterval() and something must tell you what is the current img. Assume that all image is hidden exept for the active one.
<ul id="slideshow">
<li class="active"><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
function ShowNext()
{
var current = $("#slideshow .active");
$(current).removeClass("active");
$(current).fadeOut(1000, function () {
$(current).next().fadeIn(1000);
$(current).next().addClass("active");
});
}
setInterval(function() {
ShowNext();
}, 4000);
Code not tested but this is how you should do it. Also you need to do something when you reach the end of the slider but i'm sure you can handle that.

I'd suggest having a single element instead of 3.
Also, use a recursive function to swap the image every 2 seconds.
Lastly note the javascript has been moved inside the <head> element where it should be.
Update: This has been tested and works great - had to fix a few bugs - here's the updated code:
<html>
<head>
<style><!-- Your Styles --></style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="javascript">
var imgNum = 1;
$(document).ready(function() {
doSlideshow();
});
function doSlideshow() {
$('#image1').fadeOut(400, function() {
$('#image1').attr('src', 'img/' + imgNum + '.jpg');
$('#image1').fadeIn(400);
imgNum++;
if (imgNum == 4) { imgNum = 1; }
setTimeout('doSlideshow()', 2000);
});
}
</script>
</head>
<body>
<ul id="slideshow">
<li><img id="image1" src="" /></li>
</ul>
</body>
</html>

There are definitely more than one way to do this.
I answered a similar question here:
>> Adding fade to simple slideshow with Javascript <<
However, to answer YOUR question directly, consider the following:
>> WORKING JS FIDDLE <<
// create arbitrary namespace
window.slideshow = {
slides: null,
currentSlide: null,
nextSlide: null,
interval: 3000,
timer: null,
init: function() {
console.log('init slideshow');
this.slides = $('#slideshow img');
this.planNextSlide(1);
},
planNextSlide: function(timeoutInterval) {
console.log('next slide (' + timeoutInterval + ')');
this.timer = setTimeout(this.transitionSlide, timeoutInterval);
},
transitionSlide: function() {
console.log('transition slide (' + (slideshow.currentSlide != null) + ')');
if (slideshow.currentSlide != null) {
// fade out old slide first
slideshow.slides.eq(slideshow.currentSlide).fadeOut('fast', function() {
slideshow.nextSlide = slideshow.currentSlide + 1;
if (slideshow.nextSlide == slideshow.slides.size()) {
slideshow.nextSlide = 0;
}
slideshow.currentSlide = null;
slideshow.transitionSlide();
});
}
else {
// fade in new slide
slideshow.nextSlide = slideshow.nextSlide == null ? 0 : slideshow.nextSlide;
slideshow.slides.eq(slideshow.nextSlide).fadeIn('fast', function() {
slideshow.currentSlide = slideshow.nextSlide;
slideshow.planNextSlide(slideshow.interval);
});
}
}
};
// initial state initializer
slideshow.init();

How to get a jquery rotator to fade from one image to the next?

I am using jquery to create an image rotator. I found the code below here: How to fade loop gallery background images
but I was wondering if there is a way it can fade from one image to the next instead of to white in between?
$(window).load(function(){
var initialBg = $('#mydiv').css("background-image"); // added
var firstTime = true;
var arr = [initialBg, "url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; // changed
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#mydiv").fadeOut("slow", function(){
$('#mydiv').css('background-image', bgImage); // fixed
});
$("#mydiv").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
}, 3600);
})(0);
});

Give this a try: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
JSFiddle demo
HTML:
<div id="cycler">
<img class="active" src="image1.jpg" alt="My image" />
<img src="image2.jpg" alt="My image" />
<img src="image3.jpg" alt="My image" />
<img src="image4.jpg" alt="My image" />
</div>
CSS:
#cycler { position:relative; }
#cycler img { position:absolute; z-index:1 }
#cycler img.active { z-index:3 }
JavaScript:
function cycleImages() {
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function() { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
}
$(document).ready(function() {
// run every 3s
setInterval(cycleImages, 3000);
});