Как сделать слайдер div блоков на js

277

09 декабря 2017, 07:12

Есть несколько блоков , необходимо что бы они поочередно переключались и присутствовали кнопки кнопки перехода по блокам , т.е. есть 5 блоков значит есть 5 кнопок , нажав на 5 мы переходим на 5 блок

Answer 1

Тут четыре блока, еще один думаю сам добавишь...

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>