This question has already been answered:

There are several blocks, it is necessary that they alternately switch and there are buttons for the buttons on the transition to the blocks, i.e. there are 5 blocks then there are 5 buttons, clicking on 5 we go to block 5

Reported as a duplicate by Raz Galstyan , kizoso , Air , Community Spirit ♦ Dec 14 '17 at 8:12 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • 3
    What did you do to make it happen? - Visman
  • I can not mention a duplicate question, so that here is the answer - Air
  • @Air there is such a thing as an "alarm" in which you can specify the reason - Alexey Shimansky
  • @ Alexey Shimansky, what do you think, I don’t know the existence of the alarm button? Right now I won’t say for sure, but when I wanted to mark the issue with alarm, the system did not respond to the link I put in, there was a message, God bless you, that the question isn’t marked by pluses and answers too ... and I understand that the question is not possible mark as a duplicate ... By the way, I wanted to raise this issue on the meteor, but I didn’t find the time ... - Air
  • @ Alexey Shimansky, right now in the voting, I was able to mark him as a duplicate, but then I could not refer to that question ... - Air

1 answer 1

There are four blocks here, I think you will add one more ...

var btn = document.querySelectorAll('p'), three = document.querySelectorAll('.three')[0]; var count = 0; var runSlide = startSlide(1000); for (let i = 0; i < btn.length; i++) { btn[i].addEventListener('click', function() { clearInterval(runSlide); three.className = 'three'; three.classList.add('three-' + i); count = i; setTimeout(function() { runSlide = startSlide(1000) }, 1000) }); } function startSlide(time) { return setInterval(function() { if (count == btn.length) { count = 0; } three.className = 'three'; three.classList.add('three-' + count); count++; }, time || 1000); } 
 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #272727; box-sizing: border-box; color: white; } .one { width: 400px; height: 100px; background: green; display: flex; flex-direction: row; overflow: hidden; } .two { display: flex; flex-direction: column; align-content: space-between; width: 50px; height: 100px; background: #272727; z-index: 5; } .three { display: flex; flex-wrap: nowrap; flex-direction: row; width: 350px; height: 100px; background: red; transition: transform .3s; transform: translateX(0); } .three-0 { transition: transform .3s; transform: translateX(0); } .three-1 { transition: transform .3s; transform: translateX(-350px); } .three-2 { transition: transform .3s; transform: translateX(-700px); } .three-3 { transition: transform .3s; transform: translateX(-1050px); } .four { min-width: 350px; } 
 <div class="one"> <div class="two"> <p style="margin-top: 5px; cursor: pointer; background: #cd1; text-align: center;">1</p> <p style="margin-top: 5px; cursor: pointer; background: #1cd; text-align: center;">2</p> <p style="margin-top: 5px; cursor: pointer; background: #11d; text-align: center;">3</p> <p style="margin-top: 5px; cursor: pointer; background: #d0e; text-align: center;">4</p> </div> <div class="three three-0"> <div class="four" style="background: #cd1; text-align: center;">11</div> <div class="four" style="background: #1cd; text-align: center;">22</div> <div class="four" style="background: #11d; text-align: center;">33</div> <div class="four" style="background: #d0e; text-align: center;">44</div> </div> </div>

  • Thank you, what you need, but how can you make sure that the blocks themselves switch? Like through setTimeout you can implement? - veti4
  • yes setTimeout ... - Air
  • But do not tell me what to transfer as a function for setTimeout? How do I understand it is necessary to take another cycle and transfer setTimeout to it already? And what will happen when the cycle reaches the end? Is it possible to do something like a while loop and for example, when i comes to an end to reset it so that it is impossible to get out of this cycle? Sorry if a very stupid question, just js just recently began to study - veti4
  • one
    Look, I changed the example ... sorry, I deceived you, my carelessness))) ... not setTimeout, but setInterval, setTimeout starts once after a certain time, and setInterval every time and how much time you set - Air
  • one
    I just left the code at the click event to the one that was, otherwise after clicking on the buttons, there was some kind of carousel from the slides that started - veti4