CODEWITHSUNDEEP
javascriptjquery
Daniel
Daniel

Reputation: 1466

How can we make Image Carousel with background Image Property

I'm making an image carousel i'm bounded to use background-image property instead of using 

<img src="Image">

tag. my carousel is working if I use img tag . But its not working when I use background-image property, how can I modify my code with background-image property.

see my fiddle :https://jsfiddle.net/korLasen/ and update it please thanks :)

or you can see 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);
    })();

Upvotes: 3

Views: 133

Answers (1)

Jacob Morris
Jacob Morris

Reputation: 500

This is quite a strange question... however, I am not one to judge :) Here is a jsfiddle based on your example. I ended up using jquery for this. I hope this is somewhere near what you were looking for!

This is based on changing every two seconds. To extend that, you can change line 18 in the jquery. Here is the 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);

    });

Upvotes: 1

Related Questions