Html slideshow not working.

+1 H C · October 7, 2014
So I am trying to make a slideshow on my website using HTML and JS but all I get is the first picture and the slider arrows. When I click on the arrows nothing happens. Here is the code in HTML

<div class="diy-slideshow">
    <figure class="show">
        <img src="http://4.bp.blogspot.com/-Zn7GXEwtT2k/UIURkRxpHBI/AAAAAAAAHvY/2obY6RC9xgI/s1600/cats_kittens_desktop_1600x1200_hd-wallpaper-833667.jpeg width="75%" /><figcaption>"Snowying"</figcaption>
    </figure>
  <figure>
    <img src="http://2.bp.blogspot.com/-RtwAKey8PH4/UIURlx5tFCI/AAAAAAAAHvk/AoUOVicJX1k/s1600/cats_kittens_desktop_1680x1050_hd-wallpaper-822470.jpeg" width="75%" /><figcaption>"Starlight"</figcaption>
    </figure>
  <span class="prev">«</span>
  <span class="next">»</span>
</div>   
 

Here is the code for the JS part:
(function(){
 
var counter = 0, // to keep track of current slide
    $items = document.querySelectorAll('.diy-slideshow figure'),


var showCurrent = function(){
  var itemToShow = Math.abs(counter%numItems);
 
 
  [].forEach.call( $items, function(el){
    el.classList.remove('show');
  });
 
 
  $items[itemToShow].classList.add('show');    
};


document.querySelector('.next').addEventListener('click', function() {
     counter++;
     showCurrent();
  }, false);

document.querySelector('.prev').addEventListener('click', function() {
     counter--;
     showCurrent();
  }, false);
 
})(); 



 By the way, I copied this code from this Website: http://themarklee.com/2013/12/26/simple-diy-responsive-slideshow-made-html5-css3-javascript/

Anyone have a suggestion as to why this is not working?

Post a Reply

Replies

Oldest  Newest  Rating
0 Phillip Drake · October 7, 2014
One issue is where you are adding the class "show" and removing the class "show", it should be .addClass and .removeClass instead of .add and .remove.  I hope this helps.  Check your code because it appears it wasn't exactly copied correctly.
0 H C · October 8, 2014
Thank you for your help. I will look into your suggestions and see if I can figure it out.
  • 1

HTML / CSS / Web Design

107,019 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators