Reputation: 59
I am doing a custom jQuery slider for my project. A fairly basic one that should only update images. But I am having few issues.
1 - I am not sure how to add more then one image in an array
2 - The transition seems bit odd
Here is the code + jsfiddle
#background {
width: 960px;
height: 480px;
background: transparent url(http://i.imgur.com/pSo3Nmg.jpg) no-repeat top center;
background-size: cover;
display: block;
}
var image = $('#background');
image.fadeOut(3000, function () {
image.css("background", "url('http://i.imgur.com/So7hhTG.png')");
image.css("background-size", "cover");
image.fadeIn(3000);
});
What I am trying to do is have images change every 2 min or so via fadeIn/fadeOut
Upvotes: 2
Views: 628
Reputation: 103425
You can try the following: JSFiddle
var images = [
'http://i.imgur.com/So7hhTG.png',
'http://i.imgur.com/pSo3Nmg.jpg'
];
var cnt = images.length;
$(function () {
setInterval(Slider, 3000);
});
function Slider() {
$('#imageSlide').fadeOut("slow", function () {
$(this).attr('src', images[(images.length++) % cnt]).fadeIn("slow");
});
}
HTML:
<img id="imageSlide" alt="" src="" />
Source: Create a Simple Image Slide Show using jQuery by Suprotim Agarwal
Upvotes: 1