I recently mastered the theoretical foundations of JS and decided to consolidate knowledge by making a slider.

var slide_left = document.getElementById('left'), slide_right = document.getElementById('right'), images = document.getElementsByTagName('img'), idx = 1; slide_right.addEventListener('click', moveLeft); function moveLeft() { slide_left.style.display = 'block'; images[idx].style.display = 'none'; images[++idx].style.display = 'block'; if (idx === images.length - 1) { slide_right.style.display = 'none'; } } slide_left.addEventListener('click', moveRight); function moveRight() { slide_right.style.display = 'block'; images[idx].style.display = 'none'; images[--idx].style.display = 'none'; if (idx === 0) { slide_left.style.display = 'none'; } } 
 .slides { position: relative; height: 300px; padding: 0; margin: 0; list-style-type: none; } .slide { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 10; z-index: 1; font-size: 40px; padding: 40px; box-sizing: border-box; background: #333; color: #fff; } .showing { opacity: 1; z-index: 2; } img { width: 100%; height: 100%; } .cont_button { display: flex; justify-content: center; } #left, #right { font-size: 50px; border: none; margin-top: 20px; margin-left: 12px; margin-right: 12px; border-radius: 14px; background-color: #d6b511; color: black; transition: .1s all; } #left:hover, #right:hover { background-color: #ccff00; } #first_wallpaper, #second_wallpaper, #three_wallpaper {} 
 <ul class="slides"> <li class="slide"> <img id="first_wallpaper" src="http://via.placeholder.com/250x250/000000/red" alt=""> </li> <li class="slide"> <img id="second_wallpaper" src="http://via.placeholder.com/250x250/000000/green" alt=""> </li> <li class="slide"> <img id="three_wallpaper" src="http://via.placeholder.com/250x250/000000/blue" alt=""> </li> </ul> <div class="cont_button"> <button id="left">left</button> <button id="right">right</button> </div>

The code is very simple, a part was taken from the same site, and a part was written by myself. The problem is that, as I understand it, it is necessary to attach the index clearly to each picture, nothing comes to mind, I understand the logic, but it does not work out.

  • A lot of code, delve into laziness. the question is what? 1) How to generate id's? 2) how to sort out pictures without id'shnikov? - qwabra
  • The question is that there is an index whose value changes when you click on the arrow, and I need to understand how to attach to each of the 3 index values ​​(3 values ​​for 3 photos on the slider) my picture. - AlexeyRoniko
  • Do you have the correct code? If you click execute code, the images and buttons are not displayed. What should happen when a button is pressed? - Lukas

1 answer 1

"The code is very simple ..." This is yes ... But, it will be easier to figure it out, I think.

 var slide_left = document.getElementById('left'), slide_right = document.getElementById('right'), images = document.getElementsByTagName('li'), idx = 2; function fShowHide() { images[idx].className = 'show'; for (let i = 0; i < images.length; i++) { if (i != idx) { images[i].className = 'hide'; }; } } slide_left.addEventListener('click', function() { this.disabled = (idx == 1); idx--; fShowHide(); slide_right.disabled = false; }); slide_right.addEventListener('click', function() { this.disabled = (idx == images.length - 2); idx++; fShowHide(); slide_left.disabled = false; }); fShowHide(); 
 .slides { position: relative; height: 300px; width: 100%; padding: 0; margin: 0; list-style-type: none; background: #333; } .slides li { position: absolute; left: 0; top: 0; width: 100%; padding: 40px; box-sizing: border-box; } img { width: 100%; height: 100%; } .hide { opacity: 0; height: 0; transition: 1.5s all; } .show { opacity: 1; height: 100%; transition: .8s all; } .cont_button { display: flex; justify-content: center; } #left, #right { color: #050; margin: 15px; transition: .2s all; background: transparent; border: none; outline: none; font-size: 36px; } #left:hover, #right:hover { color: #a00; } #left:disabled, #right:disabled { color: #eee; } 
 <ul class="slides"> <li> <img src="http://via.placeholder.com/350x150/ffaaaa/ffffff?text=1%20первая" alt=""> </li> <li> <img src="http://via.placeholder.com/350x150/ffcc66/ffffff?text=2" alt=""> </li> <li> <img src="http://via.placeholder.com/350x150/bbbbbb/444444?text=3%20середина" alt=""> </li> <li> <img src="http://via.placeholder.com/350x150/66bb66/ffffff?text=4" alt=""> </li> <li> <img src="http://via.placeholder.com/350x150/6666bb/ffffff?text=5%20последняя" alt=""> </li> </ul> <div class="cont_button"> <button id="left">&#9668;</button> <button id="right">&#9658;</button> </div>

The theory is good, but practice is our everything))