CODEWITHSUNDEEP
javascriptjquery
BorderlineVis
BorderlineVis

Reputation: 35

jQuery Image slider showing second image two times

Currently trying to get a slider working for a website and I can't seem to understand why my slider is showing the second image twice in a row but from then on out it works perfectly.

Heres my jQuery:

$(document).ready(function(){
var bgArr = ["https://d17fnq9dkz9hgj.cloudfront.net/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
            "https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg",
            "https://img.buzzfeed.com/buzzfeed-static/static/2015-03/3/16/enhanced/webdr09/enhanced-7711-1425417143-1.jpg?downsize=715:*&output-format=auto&output-quality=auto",
            "https://www.bluecross.org.uk/sites/default/files/styles/image_slice_small/public/assets/images/112970.jpg?itok=qh9iUCOb"]; 

var i = 0;

var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')').css('right', '0%');
var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')').css('right', '-100%');

var bgSlide = function($bg) {
    $bg.animate({ right: '+=100%' }, 600, function(){ 
        if(parseInt($bg.css('right')) > 0) {
            $bg.css('right', '-100%');
            (i < bgArr.length-1) ? i++ : i=0;
            $bg.css("background-image", "url("+bgArr[i]+")");
        }                           
    } );
}

setInterval(function() {                
    bgSlide($bg1);
    bgSlide($bg2);                          
}, 2500);

});

Here it is in action: 

$(document).ready(function(){
	var bgArr = ["https://d17fnq9dkz9hgj.cloudfront.net/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
			    "https://www.cats.org.uk/uploads/images/featurebox_sidebar_kids/grief-and-loss.jpg",
			    "https://img.buzzfeed.com/buzzfeed-static/static/2015-03/3/16/enhanced/webdr09/enhanced-7711-1425417143-1.jpg?downsize=715:*&output-format=auto&output-quality=auto",
			    "https://www.bluecross.org.uk/sites/default/files/styles/image_slice_small/public/assets/images/112970.jpg?itok=qh9iUCOb"]; 
	
    var i = 0;
			
	var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')').css('right', '0%');
	var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')').css('right', '-100%');
			
	var bgSlide = function($bg) {
		$bg.animate({ right: '+=100%' }, 600, function(){ 
			if(parseInt($bg.css('right')) > 0) {
				$bg.css('right', '-100%');
				(i < bgArr.length-1) ? i++ : i=0;
				$bg.css("background-image", "url("+bgArr[i]+")");
			}							
		} );
	}
			
	setInterval(function() {				
		bgSlide($bg1);
		bgSlide($bg2);							
	}, 2500);
});
body {
	position: relative;
	background: transparent;
	height: 90vh;
    overflow-x: hidden;
}
.background-1, .background-2 {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: transparent;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-position: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background-1"></div>
<div class="background-2"></div>

(Just grabed images from the internet for placeholders)

Id love some help.

Upvotes: 2

Views: 147

Answers (1)

Jon
Jon

Reputation: 431

This is because you initially set the first two pictures up, then after the first movement set the next one up ect. However your indexing of which picture to choose next isn't taking into account that you have the first 2 pictures setup initially rather than just one.

In short, change var i = 0; to var i = 1;

Upvotes: 2

Related Questions