$('document').ready(function() { $('.next').click(function() { var currentImage = $('.image.first'); var currentImageIndex = $('.image.first').index(); var nextImageIndex = currentImageIndex + 1; var nextImage = $('.image').eq(nextImageIndex); currentImage.fadeOut(1300); currentImage.removeClass('first'); if (nextImageIndex == ($('.image:last').index() + 1)) { $('.image').eq(0).fadeIn(1300); $('.image').eq(0).addClass('first'); } else { nextImage.fadeIn(1300); nextImage.addClass('first') } /*...prev...*/ }); }); 
 .next { display: block; position: absolute; left:1240px; top:390px; font-size: 20px; font-family: arial; } .prev { display: block; position: absolute; left:610px; top:390px; font-size: 20px; font-family: arial; } .slider { position: relative; width:500px; height:300px; left:0px; top:0px; right:0px; margin:300px auto; } .image { text-align: center; line-height: 200px; position:absolute; font-size:40px; } .image:first-child { background-color: #661D21; width:500px; } .image:nth-child(2) { background-color:#83A15D; width:500px; } .image:nth-child(3) { background-color:#C13DA1; width:500px; } .image:nth-child(4) { background-color:#5344BA; width:500px; } .image:nth-child(5) { background-color:#40BEA3; width:500px; } a{ color: black; text-decoration: none; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="next"><a href="#">next</a></div> <div class="prev"><a href="#">previous</a></div> <div class="slider"> <div class="image first">FIRST</div> <div class="image">SECOND</div> <div class="image">THIRD</div> <div class="image">FOURTH</div> <div class="image last">FIFTH</div> </div>

  1. I can not find an error in the slider (I wrote only next , but it no longer works), please help. There are no errors in the developer console.
  2. Is the principle of writing a simple slider correct here? Maybe there will be any advice for a newbie.

    1 answer 1

     $('document').ready(function() { $('.next').click(function(e) { e.preventDefault(); // !!! var currentImage = $('.image.first'); var currentImageIndex = $('.image').index(currentImage); var nextImageIndex = (currentImageIndex + 1) % $('.image').length; var nextImage = $('.image').eq(nextImageIndex); currentImage.fadeOut(1300); currentImage.removeClass('first'); nextImage.fadeIn(1300); nextImage.addClass('first') }); $('.image').hide(); // !!! $('.image.first').show(); // !!! }); 
     .next { display: block; position: absolute; right: 50px; top: 390px; font-size: 20px; font-family: arial; } .prev { display: block; position: absolute; left: 50px; top: 390px; font-size: 20px; font-family: arial; } .slider { position: relative; width: 500px; height: 300px; left: 0px; top: 0px; right: 0px; margin: 300px auto; } .image { text-align: center; line-height: 200px; position: absolute; font-size: 40px; width: 500px; } .image:first-child { background-color: #661D21; } .image:nth-child(2) { background-color: #83A15D; } .image:nth-child(3) { background-color: #C13DA1; } .image:nth-child(4) { background-color: #5344BA; } .image:nth-child(5) { background-color: #40BEA3; } a { color: black; text-decoration: none; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="next"><a href="#">next</a></div> <div class="prev"><a href="#">previous</a></div> <div class="slider"> <div class="image first">FIRST</div> <div class="image">SECOND</div> <div class="image">THIRD</div> <div class="image">FOURTH</div> <div class="image last">FIFTH</div> </div>