Слайдер по клику вправо и влево не работает при изменении ширины экрана

Рейтинг: 1Ответов: 1Опубликовано: 21.02.2023

Сделал горизонтальный слайдер с блоками. По клику вправо и влево слайдер скроллится на ширину блока 200px. Но в JS не могу заставить изменять ширину прокрутки в зависимости от ширины экрана. Например нужно, чтобы при ширине экрана меньше 600px сролл блоков был на 400px.

var slider = document.querySelector('.slider');

  slider.addEventListener('click', function(e) {
    if (e.clientX < slider.clientWidth / 2 && window.innerWidth < 600) {
      slider.scrollTo({
        left: -400,
        behavior: 'smooth'
      });
    } else if (e.clientX < slider.clientWidth / 2 && window.innerWidth > 600) {
      slider.scrollTo({
        left: -200,
        behavior: 'smooth'
      });
    } else if (e.clientX > slider.clientWidth / 2 && window.innerWidth < 600) {
      slider.scrollTo({
        left: 200,
        behavior: 'smooth'
      });
    } else {
      slider.scrollTo({
        left: 400,
        behavior: 'smooth'
      });
    }
  });
*, *::before, *::after {
    box-sizing: border-box;
}

.slider {
  width: 600px;
    display: flex;
    overflow-x: scroll;
  scroll-behavior: smooth;
  }

.slider__item
{
flex-shrink: 0;
    width: 200px;
  height: 100px;
  color: #fff;
  font-size: 36px;
}

.slider__item-text
{
  display: flex;
    background: green;
  margin: 10px;
 
}

.slider__button
{
  display: flex;
  flex-direction: row;
  color: #fff;
  background: #9e9e9e;
    padding: 0 10px;
    font-size: 36px;
  cursor:pointer;
}

.slider-control
{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
    gap: 10px;
}

  @media (max-width: 600px) {

        .slider
{
width: 100%;
}
    
    .slider__item
{
    width: 400px;
    }

}
<div class="slider">
  <div class="slider__item"><div class="slider__item-text">1</div></div>
  <div class="slider__item"><div class="slider__item-text">2</div></div>
  <div class="slider__item"><div class="slider__item-text">3</div></div>
  <div class="slider__item"><div class="slider__item-text">4</div></div>
  <div class="slider__item"><div class="slider__item-text">5</div></div>
  <div class="slider__item"><div class="slider__item-text">6</div></div>
  <div class="slider__item"><div class="slider__item-text">7</div></div>
  <div class="slider__item"><div class="slider__item-text">8</div></div>
  <div class="slider__item"><div class="slider__item-text">9</div></div>
  <div class="slider__item"><div class="slider__item-text">10</div></div>
</div>
<div class="slider-control">
<button class="slider__button">-</button>
<button class="slider__button">+</button>
  </div>

javascript slider click
Источник: Stack Overflow на русском

Ответы

▲ 0

var slider = document.querySelector('.slider');

  slider.addEventListener('click', function(e) {
    if (e.clientX < slider.clientWidth / 2 && window.innerWidth < 600) {
      slider.scrollBy({
        left: -400,
        behavior: 'smooth'
      });
    } else if (e.clientX < slider.clientWidth / 2 && window.innerWidth > 600) {
      slider.scrollBy({
        left: -200,
        behavior: 'smooth'
      });
    } else if (e.clientX > slider.clientWidth / 2 && window.innerWidth < 600) {
      slider.scrollBy({
        left: 400,
        behavior: 'smooth'
      });
    } else {
      slider.scrollBy({
        left: 200,
        behavior: 'smooth'
      });
    }
  });

  // Объявление переменных
let scrollBlock = document.querySelector('.slider-container'),
scrollContent = document.querySelector('.slider'),
screenWidth = window.innerWidth;

// Функция скролла по клику
function scrollByClick() {
if (window.innerWidth >= 600) {
    // При ширине экрана больше 600px
    scrollBlock.addEventListener('click', function(e) {
        if (e.target.classList.contains('scroll-left')) {
            scrollContent.scrollBy({
                top: 0,
                left: -200,
                behavior: 'smooth'
            });
        } else if (e.target.classList.contains('scroll-right')) {
            scrollContent.scrollBy({
                top: 0,
                left: 200,
                behavior: 'smooth'
            });
        }
    });
} else {
    // При ширине экрана меньше 600px
    scrollBlock.addEventListener('click', function(e) {
        if (e.target.classList.contains('scroll-left')) {
            scrollContent.scrollBy({
                top: 0,
                left: -400,
                behavior: 'smooth'
            });
        } else if (e.target.classList.contains('scroll-right')) {
            scrollContent.scrollBy({
                top: 0,
                left: 400,
                behavior: 'smooth'
            });
        }
    });
}
}

// Вызов функции скролла по клику
scrollByClick();
*, *::before, *::after {
    box-sizing: border-box;
}

.slider-container

 {max-width: 900px;}

.slider {
    display: flex;
    overflow-x: scroll;
  scroll-behavior: smooth;
  font-family: system-ui, sans-serif;
  }

  .slider::-webkit-scrollbar {
    height: 0;
 }

.slider__item
{
flex-shrink: 0;
    width: 200px;
  color: #fff;
  font-size: 36px;
}

.slider__item-text
{
  display: flex;
  position:relative;
  background: linear-gradient(1deg, rgb(42 213 241) 0%, rgb(82 98 145) 100%);
  margin: 10px;
  flex-direction: column;
  padding: 16px;
  border-radius: 12px;
  gap: 14px;
  overflow:hidden;
}

.slider__item-text:hover
{cursor: pointer;}

.slider__item-text h4
{
margin: 0;
font-size: 16px;
}

.slider__item-text p
{
  display: flex;
font-size: 16px;
color: #e9fcff;
z-index:5;
border-left: 2px solid;
    padding-left: 8px;
}

.scroll-left, .scroll-right
{
  display: flex;
  position: relative;
  flex-direction: row;
  color: #fff;
  background: #9e9e9e;
    padding: 0 10px;
    font-size: 36px;
  cursor:pointer;
  border: none;
  width: 38px;
    height: 38px;
}

.slider-control
{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
    gap: 10px;
}

.scroll-right:after
{
    position: absolute;
    content: '';
    transform: rotate(315deg);
    width: 16px;
    height: 3px;
    bottom: 13px;
    left: 12px;
    background-color: #fff;
}

.scroll-right:before
{
    position: absolute;
    content: '';
    transform: rotate(45deg);
    width: 16px;
    height: 3px;
    top: 13px;
    left: 12px;
    background-color: #fff;
}

.scroll-left:after
{
    position: absolute;
    content: '';
    transform: rotate(45deg);
    width: 16px;
    height: 3px;
    bottom: 13px;
    left: 12px;
    background-color: #fff;
}

.scroll-left:before
{
    position: absolute;
    content: '';
    transform: rotate(315deg);
    width: 16px;
    height: 3px;
    top: 13px;
    left: 12px;
    background-color: #fff;
}

  @media (max-width: 600px) {

        .slider
{
width: 100%;
}
    
    .slider__item
{
    width: 400px;
    }


}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="./slider2.js"></script>
    <link rel="stylesheet" href="./css2.css">
</head>
<body>
    <div class="slider-container">
    <div class="slider">
        <div class="slider__item"><div class="slider__item-text"><h4>Название1</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название2</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название3</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название4</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название5</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название6</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название7</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название8</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название9</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
        <div class="slider__item"><div class="slider__item-text"><h4>Название10</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div></div>
      </div>
      <div class="slider-control">
      <button class="scroll-left"></button>
      <button class="scroll-right"></button>
        </div>
    </div>
      
      
    
</body>
</html>

Получилось с таким кодом у меня. Можно кликать на стрелки, а можно кликать на правую или левую часть слайдов. Шаг слайдов меняется если экран шире или маньше 600px. Буду рад, если кто-либо предлодит свои варианты.