So, i'm trying to make my own slideshow using jQuery and after i click through all 3 of them, i want it to show first image after another click or third image after i click backwards on first one, you know like infinite gallery. I know i have to change index to 0 after index value gets greater than arr.length(or to 2 if i want to go backwards) but i cant figure out how. I tried countless if statements and all i got was index stuck at 2 or it just wasnt working at all.

<div class="tetusa clearfix">
     <div class="slideshow">
        <img src="img/muzi_slideshow_1.jpg" id="1" class="active" alt="">
        <img src="img/muzi_slideshow_2.jpg" id="2" class="down" alt="">
        <img src="img/muzi_slideshow_3.jpg" id="3" class="down" alt="">
     </div>
     <a class="prev">&#10094;</a>
     <a class="next">&#10095;</a>
</div>

let prev = $(".prev");
let next = $(".next");
let arr = []
arr[0] = $("#1");
arr[1] = $("#2");
arr[2] = $("#3");
let index = 0;

prev.click(function(){
    
    arr[index-1].removeClass("down");
    arr[index-1].addClass("active");
    arr[index].addClass("down");
    arr[index].removeClass("active");
    index --;
});
next.click(function(){
  if(index <= arr.length){
    arr[index 1].removeClass("down");
    arr[index 1].addClass("active");
    arr[index].addClass("down");
    arr[index].removeClass("active");
  }
  index   ;
  if (index > arr.length) {
    index = 0;
  }
  console.log(index);
});

CodePudding user response：

I think you can simplify your code. Set display: none to all your .slideshow img. Then in your JavaScript on every click check what the value of index is and adjust it accordingly. It can be achieved with a few lines of vanilla JavaScript. Here is a sample, please read the comments in the code:

/* querySelectorAll enables you to work with any number of slides */
const slides = document.querySelectorAll(".slide")
let index = 0

function prev() {
  /* First hide the current slide */
  let active = document.querySelector(".active")
  active.classList.remove("active")
  
  /* We need to target the previous slide.
  If index is 0, set it to the last slide */
  index = index > 0 ? index - 1 : slides.length - 1
  
  /* Make it visible */
  slides[index].classList.add("active")
}

function next() {
  /* First hide the current slide */
  let active = document.querySelector(".active")
  active.classList.remove("active")
  
  /* We need to target the next slide.
  If index is equal to the last element, set it to the first slide */
  index = index < slides.length - 1 ? index   1 : 0
  
  /* Make it visible */
  slides[index].classList.add("active")
}

.slide {
  /* Hide all slides by default */
  display: none;
}

.active {
  /* Show the active slide */
  display: block;
}

<button onclick="prev()">Previous</button>

<!-- Show the first slide -->
<div class="slide active">1</div>
<div class="slide">2</div>
<div class="slide">3</div>

<button onclick="next()">Next</button>

CodePudding user response：

You just need to work on the logic of your code. You have the right idea, but you need to add/remove the class of the next slide after the if statement:

next.click(function(){
  arr[index].addClass("down");
  arr[index].removeClass("active");
  index   ;
  if (index === arr.length) {
    index = 0;
  }
  arr[index].removeClass("down");
  arr[index].addClass("active");
});

Hopefully you know how to apply this logic to the other listener.