0

I am a beginner in javascript and I am searching for a solution to stop my slider after the last picture. The following code shows you the current code about it. The most part is from w3schools.

var slideIndex = 1;
showSlides(slideIndex);

function next_prev(n) {
  showSlides(slideIndex += n);
}

function startbild(){
  var slides = document.getElementsByClassName("mySlides");
  if(slides == 0){} else{
    slides[0].style.display = "block";
    for (i = 1; i < slides.length; i++) {
    slides[i].style.display = "none"; 
    document.getElementById("dia-shows").innerHTML = 1;
    }
  }
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none"; 
  }
  slides[slideIndex-1].style.display = "block";
  document.getElementById("dia-shows").innerHTML = slideIndex;
  document.getElementById("dia-gesamt").innerHTML = slides.length;
}
johny
  • 159
  • 1
  • 13

2 Answers2

1
if (n > slides.length) {slideIndex = 1} //if last is reached, restart with first

should be

if (n > slides.length) {slidesIndex=slides.length}  //if last is reached, stay at last

You could also change

function next_prev(n) {
 showSlides(slideIndex += n);
}

To:

function next_prev(n) {
 var slides = document.getElementsByClassName("mySlides");
 showSlides(slideIndex = Math.min(slideIndex+n,slides.length));
}

Note: w3schools promotes bad styled code, please start learning from MDN, there much better + have better coding style + better explanations. So here is a improved code:

var slideIndex = 1;
var slides;// no need to redefine in every function

function init(){
    slides = document.getElementsByClassName("mySlides");//get the slides, store in variable
    if(!slides){
        return console.error("no slides..");
    }
    showSlides();//show the first time
    setInterval(next_prev,1000,1);//demo ( every 1000ms increase with 1)
}
window.onload=init;//if page loaded, init

function next_prev(n) {
    slideIndex=Math.max(Math.min(slideIndex+n,slides.length),1);// slidesIndex stays between slides.length and 1.
    showSlides();
 } 

function showSlides() {//no need to pass n, its equal to slideIndex
     for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; //hide all
     }
    slides[slideIndex-1].style.display = "block";//show one
    document.getElementById("dia-shows").innerHTML = slideIndex;
    document.getElementById("dia-gesamt").innerHTML = slides.length;
}

--> https://developer.mozilla.org/de/docs/Web/JavaScript

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
1

I think, your code is incomplete. Could you post a working example instead where the problem happens?

changing

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

to

if (n < 1) {
  slideIndex = 1;
} else if (n > slides.length) {
  slideIndex = slides.length;
} else {
  slideIndex = n;
}

should do what you want in both directions.

When first or last frame is visible, you should hide the related control that allows the user to slide once more.

Whenever a n is passed that is out of the valid range, it gets limited to that range.

Frank Saibert
  • 109
  • 8