jQuery multiple content sliders?

jQuery multiple content sliders?

How can I change the jQuery code below to have multiple content sliders working? When I try and add additional sliders it doesn't work correctly.

CodePen https://codepen.io/anon/pen/aKPReW

Any help is much appreciated. Thanks in advance!


jQuery

  2. var allSlides = $('.slide');
            var activeSlide = 0;

  4. setInterval('autoSlide()', 4000);

  6. $(".slider-next").click(function() {
  7.   if (activeSlide+1 >= allSlides.length) {
  8. allSlides.eq(activeSlide).removeClass("active");
  9. activeSlide = 0;
  10. allSlides.eq(0).addClass("active");
  11.   }
  12.   else {
  13. allSlides.eq(activeSlide).removeClass("active");
  14. activeSlide++;
  15. allSlides.eq(activeSlide).addClass("active");
  16.   }
  17. });
  18. $(".slider-prev").click(function() {
  19.   if (activeSlide-1 < 0) {
  20. allSlides.eq(0).removeClass("active");
  21. activeSlide = allSlides.length-1;
  22. allSlides.eq(activeSlide).addClass("active");
  23.   }
  24.   else {
  25. allSlides.eq(activeSlide).removeClass("active");
  26. activeSlide--;
  27. allSlides.eq(activeSlide).addClass("active");
  28.   }
  29. });

  31. function autoSlide() {
  32. if (activeSlide+1 >= allSlides.length) {
  33.   allSlides.eq(activeSlide).removeClass("active");
  34.   activeSlide = 0;
  35.   allSlides.eq(0).addClass("active");
  36. }
  37. else {
  38.   allSlides.eq(activeSlide).removeClass("active");
  39.   activeSlide++;
  40.   allSlides.eq(activeSlide).addClass("active");
  41. }
  42. }


HTML

  2. <html>
  3. <body>    
  4. <div>
  5.         <div class="slider-btn">
  6.             <button class="slider-prev"><</button>
  7.             <button class="slider-next">></button>
  8.         </div>
  9.         <div class="slider">
  10.             <div class="slide active">
  11.                 <h2>Slide 1</h2>
  12.             </div>
  13.             <div class="slide">
  14.                 <h2>Slide 2</h2>
  15.             </div>
  16.         </div>
  17.     </div>
  18. </body>
  19. </html>

CSS

  2. .slider {
  3.   position: relative;
  4.   width: 80%;
  5. }

  7. .slide {
  8.     position: absolute;
  9.     opacity: 0;
  10. }

  12. .active {
  13.     transition: opacity 500ms ease;
  14.     opacity:1;
  15. }