CODEWITHSUNDEEP
javascriptslideshow
ClosDesign
ClosDesign

Reputation: 3924

Simple Javascript slideshow (so passe I know), get next slides property to show in current slide

I am building a simple slideshow, I just need an attribute from the next slide to show on the current slide so I can say "Next slide: [some title]"

JS code so far

var slides = document.querySelectorAll('.bannerSlides .bannerSlide');
var currentSlide = 0;

var slideInterval = setInterval(nextSlide,2000);

function nextSlide(){
  slides[currentSlide].className = 'bannerSlide';
 currentSlide = (currentSlide+1)%slides.length;
 slides[currentSlide].className = 'bannerSlide showing';


// Need to get H4 prop from the next slide and show it on the current slide
}

HTML thus far

 <div class="bannerSlides">
   <div class="bannerSlide">
    <h4>Slide One</h4>
    <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
  </div>
   <div class="bannerSlide">
   <h4>Slide Two</h4>
     <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
   </div>
  
  <!-- etc. -->
 </div>

Upvotes: 0

Views: 420

Answers (1)

caramba
caramba

Reputation: 22480

var slides = document.querySelectorAll('.bannerSlides .bannerSlide');
[...slides].forEach( (slide, index) => {
  // get the "first" slide if there is no next slide
  var nextSlide = slides[index +1] || slides[0] ;
  slide.querySelector('.nextSlideIs').innerHTML = `Next slide is: ${nextSlide.querySelector('h4').innerHTML}`;
});
<div class="bannerSlides">
   <div class="bannerSlide">
    <h4>Slide One</h4>
    <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
  </div>
  <div class="bannerSlide">
    <h4>Slide Two</h4>
    <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
  </div>
  <div class="bannerSlide">
    <h4>Slide Three</h4>
    <div class="nextSlideIs">Next slide is: [next slide h4 here]</div>
  </div>

  <!-- etc. -->
 </div>

Upvotes: 1

Related Questions