Made a simple slider on js. While I am learning and I don’t know much, so the implementation leaves much to be desired) how best to complete it?

var btn1 = document.querySelector(".rad1"); var btn2 = document.querySelector(".rad2"); var btn3 = document.querySelector(".rad3"); var one = document.querySelector(".yellow"); var two = document.querySelector(".green"); var three = document.querySelector(".red"); btn1.addEventListener("click", function(event) { one.classList.add("block-item-show"); two.classList.remove("block-item-show"); three.classList.remove("block-item-show"); }) btn2.addEventListener("click", function(event) { two.classList.add("block-item-show"); one.classList.remove("block-item-show"); three.classList.remove("block-item-show"); }) btn3.addEventListener("click", function(event) { three.classList.add("block-item-show"); one.classList.remove("block-item-show"); two.classList.remove("block-item-show"); }) 
 html, body { margin: 0; padding: 0; } .block { position: relative; width: 600px; height: 300px; margin: 0 auto; background-color: skyblue; border: 2px solid #eee; } .block-item { display: none; position: absolute; top: 0; left: 0; width: 600px; height: 300px; } .block-item-show { display: block; } .yellow { background-color: yellow; } .green { background-color: green; } .red { background-color: red; } .rad1, .rad2, .rad3 { position: absolute; left: 50%; bottom: 10px; z-index: 2; margin-left: -50px; } .rad2 { margin-left: -30px; } .rad3 { margin-left: -10px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block"> <div class="block-item yellow"></div> <div class="block-item green"></div> <div class="block-item red"></div> <input class="rad1" type="radio" name="group"> <input class="rad2" type="radio" name="group"> <input class="rad3" type="radio" name="group"> </div> <script src="main.js"></script> </body> </html>

  • If it works, do not touch it anymore) - Alexey Shimansky
  • Such a slider can be done without JS)) - Vadim Prokopchuk

1 answer 1

On the raw it turned out somehow like this:

 var photos = document.querySelectorAll(".block-item"); var btns = document.querySelectorAll("input[type=radio]"); btns.forEach(function(item, idx) { item.addEventListener('click', function() { photos.forEach(function(el) { el.classList.remove("block-item-show"); }); photos[idx].classList.add("block-item-show"); }); }); 
 html, body { margin: 0; padding: 0; } .block { position: relative; width: 600px; height: 300px; margin: 0 auto; background-color: skyblue; border: 2px solid #eee; } .block-item { display: none; position: absolute; top: 0; left: 0; width: 600px; height: 300px; } .block-item-show { display: block; } .yellow { background-color: yellow; } .green { background-color: green; } .red { background-color: red; } .rad1, .rad2, .rad3 { position: absolute; left: 50%; bottom: 10px; z-index: 2; margin-left: -50px; } .rad2 { margin-left: -30px; } .rad3 { margin-left: -10px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block"> <div class="block-item yellow"></div> <div class="block-item green"></div> <div class="block-item red"></div> <input class="rad1" type="radio" name="group"> <input class="rad2" type="radio" name="group"> <input class="rad3" type="radio" name="group"> </div> <script src="main.js"></script> </body> </html>

Surely you can do even better.

But in general, such a "slider" can be done without JS . For it doesn’t look like a slider at all.

Visually, at least:

  • The point initially when loading is not enough on one of the roundels
  • Slider for that and a slider to change a chtoli slide or some kind of effect. He's not in now.
  • If this is a slider for people with the ability to poke, then there should be arrows for convenience
  • The radio block and the block with the photo must be wrapped in separate div 's, so that you can position the blocks
  • The slider usually starts up on a timer by which the photos themselves change
  • Well, if you add a timer or arrows to turn over, you will have to finish the logic when the photo reaches the right or left and turns over again
  • Kmk, it is better to open the popular sliders and see how it is written inside. Just for knowledge.

PS As they say in the comment: IE is usually ahead of the rest of the planet, so it is better to replace forEach with for or some other cycle that will not die in one of the browsers.

  • I would write for instead of forEach . forEach no longer works on IE9 - Yuri
  • @Yuri let it burn with a blue flame) - Alexey Shimansky
  • If you make a slider on css, then you can use the checked pseudo-class to display the starting point on the slider and add animation using the transform. Yes, and the animation can be put in the class and make a "discovery" (classList.add) class at the click). More interested in the logic of the slider) how it could be improved, for example, add a variable and it would be assigned the values ​​of the current slide and would not have to use: checked)) - John-n
  • @John-n, as for me, it is thinly outlining to describe the different moments of the slider. As I wrote the last paragraph, it is easier to take 3-4 sliders and see their device. The brain will start up at the beginning, but it will clarify something for yourself - Alexey Shimansky
  • I will do so) thanks for the help - John-n