Random
Random

Reputation: 59

adding more arrays to a image slider

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);
             });

http://jsfiddle.net/SxN8g/

What I am trying to do is have images change every 2 min or so via fadeIn/fadeOut

Upvotes: 2

Views: 628

Answers (1)

chridam
chridam

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

Related Questions