Reputation: 35
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
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