CODEWITHSUNDEEP
javascriptjqueryhtmlcssslideshow
The Creator
The Creator

Reputation: 221

How to make a simple auto playing slide show with javascript?

I want to make a simple slide show that automatically plays when the page is loaded. Here is my code so far:

HTML:

<div id="slideshow">
   <div>
      <img src="slide_1.png">
   </div>   
   <div>
      <img src="slide_2.png">
   </div>
   <div>
       <img src="slide_3.png">
   </div>
</div>

CSS: 

#slideshow {  

    position: relative; 

    width: 900px; 

    height: 450px;  

}

#slideshow > div { 

    position: absolute; 

}

If possible, can someone please provide me with a JavaScript code that will automatically play the slide show, as well as change the slides by using a slide transition, and also have it replay infinite amount of times while the user is still of the page? Also, maybe a navigation that has numbers in the bottom right corner. Here is an example of what I am looking for: (http://www.http://www.suprafootwear.com/). The large slideshow up top is what I want, the only difference is that I want the transition to be a linear slide motion instead of the fade transition. Please maintain the 900px x 450px size. Any help is appreciated. Thank you in advance!

Upvotes: 1

Views: 77173

Answers (2)

Sunny S.M
Sunny S.M

Reputation: 5978

Try this simple javascript code to make image slider.

(function() {
  var imgLen = document.getElementById('imgGallary');
  var images = imgLen.getElementsByTagName('img');
  var counter = 1;

  if (counter <= images.length) {
    setInterval(function() {
      images[0].src = images[counter].src;
      console.log(images[counter].src);
      counter++;

      if (counter === images.length) {
        counter = 1;
      }
    }, 4000);
  }
})();
.container {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 5px;
  border: 1px solid red;
  overflow: hidden;
}
<div id="imgGallary" class="container">
  <img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
  <img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
  <img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
  <img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>

Upvotes: 4

ali
ali

Reputation: 31

$("#slideshow > div:gt(0)").hide();

setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000);

Upvotes: 3

Related Questions