Need help in how to describe the function of the arrows "right" and "left" on the slider! There are pictures when clicking on which the slider starts directly, there are two arrows on the slider (I didn’t add styles, just two black squares)! Here directly with them and a hitch:

miniImg = document.getElementsByClassName("img"); close = document.getElementById("close"); bigSlideWrap = document.getElementById("mstrbig"); bigImg = document.getElementById("bigImg"); aL = document.getElementById("arrowLeft"); aR = document.getElementById("arrowRight"); for(var i=0; i<miniImg.length; i++){ miniImg[i].onclick=function(e){ bigSlideWrap.style.display="block" bigImg.src=e.target.src } }; aL.onclick=function(){ alert("Arrow left") //в этих фукнциях и есть вопрос } aR.onclick=function(){ alert("Arrow right") //в этих фукнциях и есть вопрос } close.onclick=function(){ bigSlideWrap.style.display="none" }; 
 .mini-img-wrap{ width: 300px; height: 200px; margin: 100px auto; } .mini-img{ width: 30%; height: 100%; float: left; margin-right: 10px; } .img{ width: 100%; height: 100%; transition: all 0.5s; } .big-img-wrap{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: gray; display: none; } .close{ position: absolute; right: 0px; width: 50px; height: 50px; background: red; text-align: center; line-height: 50px; cursor: pointer; } .big-img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 400px; background: black; } .arrowRight{ position: absolute; width: 30px; height: 30px; background: black; top: 50%; right: 10px; z-index: 99; transform: translate(0,-50%); display: block; } .arrowLeft{ position: absolute; width: 30px; height: 30px; background: black; top: 50%; left: 10px; z-index: 99; transform: translate(0,-50%); display: block; } 
 <div class="mini-img-wrap"> <div class="mini-img"> <img src="https://www.stihi.ru/pics/2013/03/21/3655.jpg" id="img" class="img" alt=""> </div> <div class="mini-img"> <img src="https://www.stihi.ru/pics/2005/12/19-543.jpg" id="img" class="img" alt=""> </div> <div class="mini-img"> <img src="https://static.baza.farpost.ru/v/1536487862393_bulletin" id="img" class="img" alt=""> </div> </div> <div class="big-img-wrap" id="mstrbig"> <div class="close" id="close">close</div> <div class="big-img"> <div class="arrowRight" id="arrowRight"></div> <div class="arrowLeft" id="arrowLeft"></div> <img class="big-img" id="bigImg" src="#" alt=""> </div> </div>

If there is a ready-made solution, I would like to see it with the current data, if this is not realistic, then you can try to create an array of the values ​​of these pictures, personally I don’t understand yet how to access the current picture loaded in the slider, and already with her somehow start flipping! Please write the answer exclusively in native JavaScript, without using library syntax!

  • It all depends on what effect you want to get, but in general it’s something like this: get the index variable, which will contain the value of the current slide and a function that hides or slides, depending on what value of this variable you are moving. . By clicking on the arrows, you change the index value and call the function described above .. - Stranger in the Q
  • Here is your friend's site ready - Vitaly Shebanits
  • @ Stranger in the Q, well, I think the effect should be clear, I need the pictures to change when I click on the arrows! Actually this is the problem, I do not know how to bind this index variable, or rather to what? Well, I clicked on one of the small pictures, its src was simply assigned to the src of the big picture, and I don’t understand how I will link this index to these actions! the pictures themselves are not indexed by me, and how to do this to me that something also does not occur to me! - Muranx

0