Форум

TheSanches · #1 (**permalink**) 01.03.2019, 19:33

Доброго времени суток, пытаюсь сделать слайдер карусель, помогите разобраться.

При клике в право все работает как надуманно, но вот запрограммировать вторую кнопку (клик влево) не могу, не получается правильно написать алгоритм действий, который будет высчитывать текущее значение transition, и соответственно увеличивать его на ширину слайда.

Короче говоря функцию sliderScrollLeft() не получается правильно запрограммировать.
Возможно весь алгоритм написан не верно, прошу помощи, спасибо.

<div class="slider">
       <div class="slider__btn slider__btn_left"></div>
       <div class="slider__btn slider__btn_right"></div>

        <div class="slider__container">
          <div class="slider__scroll">
            <div class="slider__item"></div>
            <div class="slider__item"></div>
            <div class="slider__item"></div>
          </div>
       </div>
</div>

var sliderBtnLeft = document.querySelector('.slider__btn_left');
var sliderBtnRight = document.querySelector('.slider__btn_right');
var sliderContainer = document.querySelector('.slider__container').offsetWidth;
var sliderItems = document.querySelectorAll('.slider__item'); 
var sliderScroll = document.querySelector('.slider__scroll');
var sliderContainerIndex = sliderContainer; 
var sliderIndex = 0; 

function sliderScrollRight(){
  if(sliderIndex < sliderItems.length - 1){
    sliderScroll.style.transform = 'translateX(-' + sliderContainerIndex + 'px)';
    sliderContainerIndex += sliderContainer;
    sliderIndex++;
  } 
  else{
    sliderIndex = 0;
    sliderContainerIndex = sliderContainer;
    sliderScroll.style.transform = 'translateX(0)';
  }
}

function sliderScrollLeft(){
  
}



sliderBtnRight.onclick = sliderScrollRight;
sliderBtnLeft.onclick = sliderScrollLeft;

TheSanches · #2 (**permalink**) 01.03.2019, 19:52

CSS если нужно

.slider{
  position: relative;
}

.slider__container{
  white-space: nowrap;
  overflow: hidden;
  max-width: 790px;
  margin: 0 auto;
}

.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;
}

По задумке в самих слайдах может быть любой контент

рони · #3 (**permalink**) 01.03.2019, 20:59

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;
}

</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>
<script>
var sliderBtnLeft = document.querySelector('.slider__btn_left');
var sliderBtnRight = document.querySelector('.slider__btn_right');
var sliderContainer = document.querySelector('.slider__container');
var sliderItems = document.querySelectorAll('.slider__item');
var sliderIndex = 0;
var sliderScroll = document.querySelector('.slider__scroll');
var Width = 0;





function sliderMove(up){
  sliderIndex = (sliderIndex + up + sliderItems.length) % sliderItems.length;
  Width = 0;
  for (var i = 0; i < sliderIndex; i++) {
     Width += sliderItems[i].offsetWidth + 60
  }
  sliderScroll.style.transform = 'translateX(-' + Width + 'px)';
  }


sliderBtnRight.onclick = sliderMove.bind(null, 1);
sliderBtnLeft.onclick = sliderMove.bind(null, -1);

    </script>
</body>
</html>

TheSanches · #4 (**permalink**) 01.03.2019, 21:07

Да уж, я был далек от решения, большое спасибо.

TheSanches · #5 (**permalink**) 02.03.2019, 18:04

Возник еще один вопрос, я прикрутил точки к слайдеру, но не могу сделать чтобы они были кликабельны, то-есть чтобы можно было с помощью них тоже прокручивать слайдер, ниже код который уже есть.
Спасибо еще раз.

<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>

.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;
}

// получаем кнопки
var sliderBtnLeft = document.querySelector('.slider__btn_left');
var sliderBtnRight = document.querySelector('.slider__btn_right');
var sliderContainer = document.querySelector('.slider__container').offsetWidth;
var sliderItems = document.querySelectorAll('.slider__item'); 
var sliderScroll = document.querySelector('.slider__scroll');
var sliderDots = document.querySelectorAll('.slider__dots-item'); //кружочки
var sliderIndex = 0;
var Width = 0;

function sliderMove(up){
  sliderIndex = (sliderIndex + up + sliderItems.length) % sliderItems.length;
  Width = 0;
  for (var i = 0; i < sliderIndex; i++) {
     Width += sliderItems[i].offsetWidth + 65
  }
  sliderScroll.style.transform = 'translateX(-' + Width + 'px)';

  //добавляем кружочки
  for (var j = 0; j < sliderDots.length; j++) {
    sliderDots[j].classList.remove('slider__dots-item_active');
    sliderDots[sliderIndex].classList.add('slider__dots-item_active');
  }
  
}

sliderBtnRight.onclick = sliderMove.bind(null, 1);
sliderBtnLeft.onclick = sliderMove.bind(null, -1);

рони · #6 (**permalink**) 02.03.2019, 19:08

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>

TheSanches · #7 (**permalink**) 02.03.2019, 19:33

И опять я был далек от решения))

Большое спасибо еще раз.

Форум

Справочник

Discord чат

Курсы javascript