Automatic Javascript slider not repeating on my Tumblr website

Question

I'm using w3 school's automatic slider code on my Tumblr page. Now, I looked high and low on here and have seen several people having similar issues with this same code, but I haven't found any solutions unfortunately. Upon loading, it will cycle through the 3 slides and then disappear, just leaving the dots behind. You can see at http://rachelmontano.com

I'm pretty positive the issue is with the javascript and not something to do with the CSS or HTML - I've double checked that all of my classes match and I don't have any random/unnecessary bits of HTML floating around or anything. No errors in inspect until it finishes the cycle and disappears. Once that happens, this is the error I get, but I have no idea how to decipher this lol >>I am a JS noob, I'm so sorry<<

Uncaught TypeError: Cannot read property 'style' of undefined
    at showSlides ((index):985)

showSlides  @   (index):985
setTimeout (async)      
showSlides  @   (index):987
setTimeout (async)      
showSlides  @   (index):987
setTimeout (async)      
showSlides  @   (index):987
(anonymous) @   (index):971

Here's the JS snippet

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slips");
  var dots = document.getElementsByClassName("bottomdots");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" activedot", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " activedot";
  setTimeout(showSlides, 3000); // Change image every 2 seconds
}
</script>

edit: here's a screenshot of my website code just so you can see that {slideIndex=1} is in my website code, but something is apparently managing to remove it once you check it in inspect!?!? I don't even...

screenshot

Can you add your html? I was going to make a jsfiddle, but I need the markup too — lharby, Nov 05 '20 at 18:05

score 0 · Answer 1 · answered Nov 05 '20 at 03:29

0

You've missed the slideIndex = 1 on line 12 here. In the question you've written it, but on inspecting your website, I noticed that there's just the if statement without a body. Change it to if (slideIndex > slides.length) {slideIndex = 1}. Hopefully, that'll work!

answered Nov 05 '20 at 03:29

Rohit

1,385
2
15
21

So here's a weird thing: it is there. I coped the code snippet in my question straight from my website code, and I just double checked again that it IS there and that code IS currently live. I even tried deleting it and re-writing it for heehaws so I could update the site again. But it doesn't show up in my inspect either - idk what kind of voodoo this is – RMont Nov 05 '20 at 04:10
I added a screenshot to the end of my question just so you can see lol – RMont Nov 05 '20 at 04:14

score 0 · Answer 2 · edited Nov 19 '20 at 23:08

0

After I commented I went to your site and copied the code I needed and made this JSFIDDLE

The key is as roittimi points out, after your if statement there is no condition. The only change that was needed was:

  if (slideIndex > slides.length) {
      slideIndex = 1
  }

I also changed a couple of the images for placeholders just so you could see them transition.

edited Nov 19 '20 at 23:08

Dharman

30,962
25
85
135

answered Nov 05 '20 at 18:17

lharby

3,057
5
24
56

That's the trouble though, {slideIndex=1} IS there in my website code (added screenshot to bottom of Q), but it disappears when you actually load the website and check inspect which I don't understand at all – RMont Nov 05 '20 at 18:38
@Iharby It's cool, brother. The point was to help the OP. :) – Rohit Nov 06 '20 at 04:04
That sounds like a cache issue. I would add another change just some comment in the code then use chrome incognito mode – lharby Nov 06 '20 at 07:10
Caching is a real problem, I find I have to update my changes several times to get them through. Sometimes I delete the whole template save that and make sure my tumblr opens as a blank page, then put all of the code back and check it that way. – lharby Nov 06 '20 at 09:06

score 0 · Answer 3 · edited Nov 19 '20 at 23:08

I think there was some interference from other parts of the code. The theme was not my own, and Inspect showed some errors about parts of the theme code that were unrelated to this slider. However, I've since started coding my own fresh theme, dropped this same exact code in there, and all was resolved. I still couldn't tell you WHY those issues would cause the body of an if statement in a totally unrelated snippet of JavaScript to entirely disappear.

Automatic Javascript slider not repeating on my Tumblr website

3 Answers3