Editing JavaScript code for W3School slideshow

Question

I want to add a slideshow from W3School to my site, the problem is I need more than 1 slideshow and the JavaScript code from W3School works for a single slideshow only.

Searching for an answer here on StackOverflow I've found an user who had the same problem as me and we did the same things as well to try to adapt the script to our needs...without sucess obviously.

A user answered posting an edited script that should works for more than a slideshow and I'm trying to use that script for my slideshows but for some reason it works for only 1 slideshow.

Here is the answer I am referring to: https://stackoverflow.com/a/46727534/9276807

And here are my slideshows:

var slideIndex = new Array(2);
slideIndex[0] = 1;
slideIndex[1] = 1;

showSlides(1, 0);
showSlides(1, 1);


function plusSlides(n, slideshownumber) {
  slideIndex[slideshownumber] = slideIndex[slideshownumber] + n;
  showSlides(slideIndex[slideshownumber], slideshownumber);
}

function currentSlide(n, slideshownumber) {
  slideIndex[slideshownumber] = n;
  showSlides(slideIndex[slideshownumber], slideshownumber);
}

function showSlides(n, slideshownumber) {
  var i;
  var slideshowname = "slider" + slideshownumber;
  var slides = document.getElementsByName(slideshowname);

  if (n > slides.length) {
    slideIndex[slideshownumber] = 1;
  }

  if (n < 1) {
    slideIndex[slideshownumber] = slides.length;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex[slideshownumber] - 1].style.display = "block";
}

.tooltip {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #000000;
}

.tooltip:hover .info,
.tooltip:focus .info {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.info {
  box-sizing: border-box;
  position: absolute;
  bottom: -980px;
  left: 95px;
  display: block;
  background: #FFFFFF;
  border: 1px solid #000000;
  width: 500px;
  font-size: 25px;
  line-height: 24px;
  text-align: justify;
  cursor: text;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -20px, 0);
  transition: all .5s ease-out;
}

.info:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 14px;
  bottom: -14px;
  left: 0;
}

.info:after {
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  bottom: 378px;
  right: 494px;
  margin-left: -5px;
  background: #000000;
}

.slideshow-container {
  width: 100%;
  height: 300px;
  position: relative;
  margin: 0;
  padding: 0;
}

.mySlides {
  display: none;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

.slideshow-container .imgsl {
  position: relative;
  width: 100%;
  height: 300px;
}

.slideshow-container .cptn {
  background-color: rgba(242, 242, 242, 0.5);
  color: #FFFFFF;
  font-size: 25px;
  padding: 8px 0 15px 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 140px;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(242, 242, 242, 0.3);
}

.text {
  display: block;
  padding: 14px 17px 35px 17px;
  color: #8d7200;
}

.more {
  display: inline;
  position: relative;
  bottom: 20px;
  left: 215px;
  margin: 0;
  padding: 3px 10px;
  font-family: 'Times New Roman', sans-serif;
  text-decoration: none;
  color: green;
  font-size: 20px;
  font-weight: bold;
  border: 2px solid green;
  border-radius: 5px;
  transition: background-color 0.5s, color 0.5s;
}

.more:hover,
.more:focus {
  background-color: green;
  color: #FFFFFF;
}

<div onclick="void(0);" class="tooltip">Trasimeno
  <div class="info">
    <div class="slideshow-container">
      <div class="mySlides fade" name="slider0">
        <img class="imgsl" src="trasimeno.jpg">
        <div class="cptn">Passignano Sul Trasimeno</div>
      </div>
      <div class="mySlides fade" name="slider0">
        <img class="imgsl" src="trasimeno2.jpg">
        <div class="cptn">Castello del Leone, Castiglione del Lago</div>
      </div>
      <div class="mySlides fade" name="slider0">
        <img class="imgsl" src="trasimeno3.jpg">
        <div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
      </div>
      <div class="mySlides fade" name="slider0">
        <img class="imgsl" src="trasimeno4.jpg">
        <div class="cptn">Castello Borgia, Passignano sul Trasimeno</div>
      </div>

      <a class="prev" onclick="plusSlides(-1,0)">&#10094;</a>
      <a class="next" onclick="plusSlides(1,0)">&#10095;</a>
    </div>

    <script>
      currentSlide(1, 0)
    </script>

    <div class="text">...</div>
    <a class="more" href="#" target="_blank">More</a>
  </div>
</div>

, il lago di

<div onclick="void(0);" class="tooltip">Piediluco
  <div class="info">
    <div class="slideshow-container">
      <div class="mySlides fade" name="slider1">
        <img class="imgsl" src="piediluco.jpg">
        <div class="cptn">Lago di Piediluco</div>
      </div>
      <div class="mySlides fade" name="slider1">
        <img class="imgsl" src="piediluco2.jpg">
        <div class="cptn">Lago di Piediluco</div>
      </div>
      <div class="mySlides fade" name="slider1">
        <img class="imgsl" src="piediluco3.jpg">
        <div class="cptn">Lago di Piediluco</div>
      </div>
      <div class="mySlides fade" name="slider1">
        <img class="imgsl" src="piediluco4.jpg">
        <div class="cptn">Lago di Piediluco</div>
      </div>

      <a class="prev" onclick="plusSlides2(-1,1)">&#10094;</a>
      <a class="next" onclick="plusSlides2(1,1)">&#10095;</a>
    </div>

    <script>
      currentSlide(1, 1)
    </script>

    <div class="text">...</div>
    <a class="more" href="#">More</a>
  </div>
</div>

Can someone help me to understand where I'm doing wrong?

Thanks in advance!

Because the HTML used in the example is similar to mine and, moreover, I need to learn JavaScript so for now I can't judge which script is better than the others. — John Shot, Feb 03 '18 at 14:41

Sajib Khan · Accepted Answer · 2018-02-03T18:07:07.977

1

You are getting the Error:

"Uncaught ReferenceError: currentSlide is not

So, currentSlide() is trying to invoke before it is defined!

Make sure your JS codes (defining function currentSlide(n, slideshownumber){}... ) are executing first before it is invoked.

Also, Invoke plusSlides() not plusSlides2() for Piediluco slide:

<div onclick="void(0);" class="tooltip">Piediluco
    <div class="info">
        <div class="slideshow-container">
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco2.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco3.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>
            <div class="mySlides fade" name="slider1">
                <img class="imgsl" src="piediluco4.jpg">
                    <div class="cptn">Lago di Piediluco</div>
            </div>

            <a class="prev" onclick="plusSlides(-1,1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1,1)">&#10095;</a>
        </div>

        <script> currentSlide(1,1)</script>

        <div class="text">...</div>
            <a class="more" href="#">More</a>
        </div>
    </div>

also change:

<script> $(document).ready(function(){ currentSlide(1,1) })</script>

edited Feb 03 '18 at 18:07

answered Feb 03 '18 at 14:40

Sajib Khan

22,878
9
63
73

Thanks for the answer Sajib, would you explain more clearly what you are trying to say me? What do you mean with "Make sure your JS codes (defining function currentSlide(n, slideshownumber){}.. ) are executing first before it is invoked."? – John Shot Feb 03 '18 at 14:46
ok, where have you attached your JavaScript codes into HTML files? – Sajib Khan Feb 03 '18 at 14:47
In an external .js file placed at the bottom of body – John Shot Feb 03 '18 at 14:49
ok. Can you try attaching your `external .js file` into section, does it work? – Sajib Khan Feb 03 '18 at 14:50
Doesn't works, same result...first slideshow works the other not. – John Shot Feb 03 '18 at 14:55
Can you check the `console` of the browser. Any error? – Sajib Khan Feb 03 '18 at 14:57
Yeah to errors: 1. TypeError: slides[(slideIndex[slideshownumber] - 1)] is undefined 2. ReferenceError: $ is not defined – John Shot Feb 03 '18 at 14:59
ok, that's the problem. Can you check the logic if it is ok? Also why `showSlides(1, 0);` `showSlides(1, 1);` these two lines in your js file? – Sajib Khan Feb 03 '18 at 15:05
What is logic? Sorry but I'm a newbie :D. About the lines...I don't know, I just made copy/paste and edited the HTML to match the script. – John Shot Feb 03 '18 at 15:11
Can you upload the codes in https://jsfiddle.net, or do you have public GitHub link of your project? – Sajib Khan Feb 03 '18 at 15:15
Ok, let me take a look – Sajib Khan Feb 03 '18 at 15:27
Have you edited these calls to: `` and ````? – Sajib Khan Feb 03 '18 at 15:46
After Including the external JS file in the error is removed.. see https://jsfiddle.net/sajibcse68/ozmpubu0/3/ – Sajib Khan Feb 03 '18 at 16:03
Image link is not right. See https://stackoverflow.com/a/13172788/4133798 – Sajib Khan Feb 03 '18 at 16:36
Upload image in http://postimages.org/ and update src="" in jsfiddle, then it should work! – Sajib Khan Feb 03 '18 at 16:38
But images are on my pc and I still have to put online my site, for now is just a folder with files inside...I mean I have copy/paste your jsfiddle to my HTML file so images should works, or I am wrong? – John Shot Feb 03 '18 at 16:41
Upload the images in and cloud then link the image – Sajib Khan Feb 03 '18 at 16:44
Doesn't work: https://jsfiddle.net/ozmpubu0/4/ First slide (Trasimeno) works, second slide (Piediluco) doesn't work. – John Shot Feb 03 '18 at 17:02
"First slide (Trasimeno) works, second slide (Piediluco) doesn't work" where local or jsfiddle ? – Sajib Khan Feb 03 '18 at 17:05
both on local and jsfiddle, images on second local slide doesn't even show up – John Shot Feb 03 '18 at 17:12
Change `onclick="plusSlides2(-1,1)"` to `onclick="plusSlides(-1,1)"` – Sajib Khan Feb 03 '18 at 17:29
Updated my answer. – Sajib Khan Feb 03 '18 at 18:07
Done, sorry for the delay. – John Shot Feb 04 '18 at 08:24

Editing JavaScript code for W3School slideshow

1 Answers1