How Can We Make Image Carousel With Image Property Background
I am creating an image carousel, I am limited to using background-image
instead of using
<img src="Image">
tag. my carousel works if i use the img tag. But it doesn't work when I use the background-image property, how can I change my code using the property background-image
.
see my fiddle: https://jsfiddle.net/korLasen/ and update it please thank you :)
or you can see the code here
(function(){
var image = $('#imageSlider');
var imageSet = ['http://www.exposureguide.com/images/top-ten-tips/top-ten-photography-tips-1e.jpg','http://images.clipartpanda.com/cliparts-images-aTqyrB8TM.png'];
var index = 0;
function imageSliderSet(){
image.setAttribute('data-background', imageSet[index]);
index++;
if(index >= imageSet.length){
index = 0;
}
}
setInterval = (imageSliderSet, 2000);
})();
source to share
This is a rather strange question ... however I am not judging :) Here is a jsfiddle based on your example. I ended up using jquery. I hope this is somewhere near what you were looking for!
This is based on a change every two seconds. To expand on this, you can change line 18 in jquery. Here is jQuery:
$( document ).ready(function(){
var image = $('#imageSlider');
var imageSet = ['http://www.exposureguide.com/images/top-ten-tips/top-ten-photography-tips-1e.jpg','http://images.clipartpanda.com/cliparts-images-aTqyrB8TM.png'];
var index = 0;
window.setInterval(function(){
image.css('background-image', "url('" + imageSet[index] + "')");
index++;
if(index >= imageSet.length){
index = 0;
}
//here you can adjust the time interval for each photo
}, 2000);
});
source to share