Форум

TheSanches · #1 (**permalink**) 16.07.2020, 15:54

Пишу слайдер карусель, запрограммировал кнопку вправо, а вот кнопку в влево, что то не получается, подскажите пожалуйста как дополнить мой код, спасибо.

<div class="slider-container">

    <div class="slider">
      <div class="slider__item">1</div>
      <div class="slider__item">2</div>
      <div class="slider__item">3</div>
      <div class="slider__item">4</div>
    </div>

    <div class="arrows">
      <span class="arrows__item arrows__item_prew">❰</span>
      <span class="arrows__item arrows__item_next">❱</span>
    </div>

  </div>

body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
  pointer-events: none;
}

.slider-container{
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.slider{
  display: flex;
  align-items: center;
  user-select: none;  
  transition: all .4s ease-in-out;
  transform: translateX(0);
  will-change: transform;
}

.slider__item{
  flex-shrink: 0;
  width: 100%;
  height: 300px;
  background: rgb(170, 170, 170);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
}

.slider__item:nth-child(even){
  background: rgb(123, 122, 122);
}

.arrows{
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.arrows__item{
  cursor: pointer;
  font-size: 3rem;
  line-height: 1;
  user-select: none;
  display: inline-block;
  margin: 0 1rem; 
}

function sliderCarousel(){
  'use strict';

  const sliderItem = document.querySelectorAll('.slider__item'),
        slider = document.querySelector('.slider'),
        arrows = document.querySelectorAll('.arrows__item');

  let countWidth = sliderItem[0].offsetWidth,
      count = 0;

    arrows[0].addEventListener('click', function(){

      // difficulties with this part of the code
      
    });

    arrows[1].addEventListener('click', function(){
      if(count < sliderItem.length - 1){
        slider.style.transform = `translateX(-${countWidth}px)`;
        countWidth += sliderItem[count].offsetWidth;
        count++;
      } else {
        count = 0;
        slider.style.transform = `translateX(0px)`;
        countWidth = sliderItem[0].offsetWidth;
      }
    });
}
sliderCarousel();

рони · #2 (**permalink**) 16.07.2020, 18:55

TheSanches,

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  display: block;
  pointer-events: none;
}

.slider-container{
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}

.slider{
  display: flex;
  align-items: center;
  user-select: none;
  transition: all .4s ease-in-out;
  transform: translateX(0);
  will-change: transform;
}

.slider__item{
  flex-shrink: 0;
  width: 100%;
  height: 300px;
  background: rgb(170, 170, 170);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
}

.slider__item:nth-child(even){
  background: rgb(123, 122, 122);
}

.arrows{
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.arrows__item{
  cursor: pointer;
  font-size: 3rem;
  line-height: 1;
  user-select: none;
  display: inline-block;
  margin: 0 1rem;
}

    </style>

  <script>
document.addEventListener( "DOMContentLoaded" , function() {
  'use strict';

  const slider = document.querySelector('.slider'),
        items = slider.querySelectorAll('.slider__item'),
        len = items.length,
        countWidth = items[0].offsetWidth,
        arrows = document.querySelector('.arrows');

  let count = 0;

  arrows.addEventListener('click', ({target}) => {
        target = target.closest('.arrows__item');
        if(target) {
        const up = +target.dataset.up;
        count = (count + up + len) % len;
        slider.style.transform = `translateX(-${countWidth * count}px)`;
        }
    });
  });
  </script>

</head>
<body>
<div class="slider-container">

    <div class="slider">
      <div class="slider__item">1</div>
      <div class="slider__item">2</div>
      <div class="slider__item">3</div>
      <div class="slider__item">4</div>
    </div>

    <div class="arrows">
      <span class="arrows__item arrows__item_prew" data-up="-1">❰</span>
      <span class="arrows__item arrows__item_next" data-up="1">❱</span>
    </div>

  </div>

</body>
</html>

TheSanches · #3 (**permalink**) 17.07.2020, 09:58

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript