Показать сообщение отдельно
  #6 (permalink)  
Старый 02.03.2019, 19:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

TheSanches,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
  position: relative;
  }

  .slider__container{
  white-space: nowrap;
  overflow: hidden;
  max-width: 790px;
  margin: 0 auto;
  border: 1px solid #0000FF;
  }

  .slider__scroll{
  position: relative;
  left: 0;
  transform: translateX(0);
  transition: all 0.4s ease-in-out;
  display: inline-block;
  white-space: nowrap;
  }
  .slider__item{
  display: inline-block;
  margin: 0 30px;
  width: 300px;
  height: 100px;
  background-color: #FF1493;
  }

  .slider__item:nth-child(2){
    width: 500px;
    background-color: #32CD32;
  }
 .slider__dots-item{
  width: 13px;
  height: 13px;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
  transition: all 0.4s;
}

.slider__dots-item.slider__dots-item_active{
  background: black;
  transition: all 0.4s;
}

.slider__dots-item:last-child{
  margin-right: 0;
}

.slider__dots-item:hover{
  background: black;
}

  </style>
</head>
<body>
 <div class="slider">
       <div class="slider__btn slider__btn_left">left</div>
       <div class="slider__btn slider__btn_right">right</div>

        <div class="slider__container">
          <div class="slider__scroll">
            <div class="slider__item">1</div>
            <div class="slider__item">2</div>
            <div class="slider__item">3</div>
          </div>
       </div>

     <div class="slider__dots">
     <span class="slider__dots-item slider__dots-item_active"></span>
     <span class="slider__dots-item"></span>
     <span class="slider__dots-item"></span>
    </div>

</div>


  <script>
  var sliderBtnLeft=document.querySelector('.slider__btn_left');
  var sliderBtnRight=document.querySelector('.slider__btn_right');
  var sliderDots = document.querySelectorAll('.slider__dots-item'); //кружочки
  var sliderItems=document.querySelectorAll('.slider__item');
  var sliderIndex=0;
  var sliderScroll=document.querySelector('.slider__scroll');
  var Width=0;
  function sliderMove(up)
  {
  sliderDots[sliderIndex].classList.remove('slider__dots-item_active');
  sliderIndex=(sliderIndex + up + sliderItems.length)% sliderItems.length;
  sliderDots[sliderIndex].classList.add('slider__dots-item_active');
  Width=0;
  for(var i=0;i < sliderIndex;i++)
  {
  Width +=sliderItems[i].offsetWidth + 60
  }
  sliderScroll.style.transform='translateX(-' + Width + 'px)';
  }
  function dotMove(i)
  {
     sliderMove(i - sliderIndex);
  }
  [...sliderDots].forEach((dot, i) => dot.addEventListener('click', dotMove.bind(dot, i)));
  sliderBtnRight.onclick=sliderMove.bind(null,1);
  sliderBtnLeft.onclick=sliderMove.bind(null,-1);
  </script>
</body>
</html>
Ответить с цитированием