I am writing a simple slider on jQuery. Started making buttons for the transition. Faced such a problem: if you press only the button forward , everything works as it should, if you press only the button back , it still works as it was intended. But if you press, for example, first forward and then backward , or vice versa, the current slide disappears abruptly and reappears, as if this is the next slide. I know that I screwed up somewhere in logic (because for some reason, the active slide in such a situation is assigned display: none), but I don’t know where exactly. I attach the code below to fully reproduce the problem.

function Slider(options) { this.img_arr = [].slice.call(options.content.find("img")); this.max_count = (this.img_arr.length - 1) * -1; var count = 0; this.img_arr.forEach(function(item, i, arr) { item.style.zIndex = count; count--; }); } Slider.prototype.next = function() { var self = this; self.img_arr.forEach(function(item, i, arr) { if (item.style.zIndex == 0) $(item).css("zIndex", self.max_count) else if (item.style.zIndex != self.max_count) $(item).hide().fadeIn(1000).css("zIndex", parseInt(item.style.zIndex) + 1); else $(item).css("zIndex", parseInt(item.style.zIndex) + 1).hide(); }); } Slider.prototype.back = function() { var self = this; self.img_arr.forEach(function(item, i, arr) { if (item.style.zIndex == self.max_count) $(item).css("zIndex", 0).hide(); else if (item.style.zIndex == 0) $(item).hide().fadeIn(1000).css("zIndex", parseInt(item.style.zIndex) - 1); else $(item).css("zIndex", parseInt(item.style.zIndex) - 1) }); } 
 body { background: #e2e1e0; } img { max-width: 100%; position: absolute; top: 0px; left: 0px } .slider-block { position: inherit; z-index: 1000; } .container { position: relative; padding: 2%; width: 1024px; height: 768px; top: 4rem; margin: 0 auto; background: #fff; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } 
 <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Slider.js - тестовое задание</title> <link href="style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> </head> <body> <div class="container"> <div class="slider-block" id="slider-content"> <img src="http://best-wallpaper.net/wallpaper/1024x768/1105/Space-in-StarCraft-II_1024x768.jpg"/> <img src="http://ru.best-wallpaper.net/wallpaper/1024x768/1301/Pictures-of-beautiful-creative-design-forest-winter-planet-space_1024x768.jpg"/> <img src="http://www.mrwallpaper.com/wallpapers/Autumn-Tree-Background-1024x768.jpg"/> </div> </div> <a id="back_button">(-- </a> <a id="next_button"> --)</a> </body> <script> var slider = new Slider({ 'content': $('#slider-content') }); document.querySelector('#next_button').addEventListener('click', function() { slider.next(); }); document.querySelector('#back_button').addEventListener('click', function() { slider.back(); }); </script> </html>

    1 answer 1

    Found a solution. The code for the back function should look like this:

     Slider.prototype.back = function() { var self = this; self.img_arr.forEach(function(item, i, arr) { if(item.style.zIndex == self.max_count) $(item).hide().fadeIn(1000).css("zIndex", 0); else if(item.style.zIndex == 0) $(item).css("zIndex", parseInt(item.style.zIndex) - 1); else $(item).css("zIndex", parseInt(item.style.zIndex) - 1).hide() }); }