не могу понять как создать слайдер на js

Question

я хочу чтобы высвечивалось только 4 изображения, предыдущие и последующие скрывались

const d = document;

let exampleBlock = d.querySelectorAll(".example-block");
let prevButton = d.querySelector(".example-button-prev");
let nextButton = d.querySelector(".example-button-next");
/* скрываю все изображения кроме первых четырёх*/
if (exampleBlock.length > 4) {
  for (let i = 4; i < exampleBlock.length; i++) {
    exampleBlock[i].classList.add("displaynone");
  }
  var counter = 0;
  var remove = 0;
}

function switchimage(k) {
  if (k === "next") {
    /*счётчик*/
    counter += 4;
    /*условие что если он превышает длину элементов, то обнуляется ( по задумке должен заново начинаться слайдер если он доходит до конца)*/
    counter = counter > exampleBlock.legth ? 0 : counter;

    /*здесь должен быть цикл (наверно) */
  }

  if (k === "prev") {
    counter -= 4;
    counter = counter < 0 ? 0 : counter;
  }
}

prevButton.addEventListener("click", () => switchimage("prev"));
nextButton.addEventListener("click", () => switchimage("next"));

.examples-list {
  width: 1100px;
  margin: 0 auto;
  height: 300px;
  text-align: center;
  overflow: hidden;

  white-space: nowrap;
  box-sizing: border-box;

  position: relative;
}
.example-img-block {
  display: inline-block;
  text-align: center;
}
.example-block {
  max-width: 210px;
  max-height: 280px;

  box-shadow: 0px 2px 0px #1558c4;

  transition: 0.2s ease;

  display: inline-block;

  white-space: normal;

  overflow: hidden;

  padding-bottom: 7px;
  margin-bottom: 5px;
  margin-right: 10px;
}
.example-block:hover {
  box-shadow: 0px 5px 0px #1558c4;
  transition: 0.2s ease;
}

.example-block a {
  color: black;
  text-decoration: none;
}
.example-block:last-child {
  margin-right: 0;
}
.example-block .img-description {
  padding: 10px;

  float: none;

  text-align: center;

  display: block;
}

/*buttons*/
[class^="example-button"] {
  height: 100%;
  display: inline-block;
  vertical-align: top;
  width: 30px; /*незн*/
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(45deg, red, blue);
  color: white;
  border-radius: 10px;
  font-size: 1.2em;
  font-weight: bold;
  position: absolute;
}
.example-button-prev {
  left: 0;
}
.example-button-next {
  right: 0;
}
.displaynone {
  display: none;
}

<div class="examples-list">

  <button class="example-button-prev" type="button" title="prev">
    < </button>
      <div class="example-img-block">
        <div class="example-block">
          <a href="#" class="example-link">
            <img src="https://i.pinimg.com/236x/29/2e/ec/292eecbdf82b803f2958dc4f37ae98ac.jpg" alt="ВВЕДИ ТЕКСТ" class="example-img" width="220px" height="180px">
          </a>
          <a href="#" class="img-description">1</a>
        </div>
        <div class="example-block">
          <a href="#" class="example-link">
            <img src="https://i.pinimg.com/236x/29/2e/ec/292eecbdf82b803f2958dc4f37ae98ac.jpg" alt="ВВЕДИ ТЕКСТ" class="example-img" width="220px" height="180px">
          </a>
          <a href="#" class="img-description">2</a>
        </div>
        <div class="example-block">
          <a href="#" class="example-link">
            <img src="https://cs11.pikabu.ru/post_img/big/2019/08/30/3/156713758918981094.jpg" alt="ВВЕДИ ТЕКСТ" class="example-img" width="220px" height="180px">
          </a>
          <a href="#" class="img-description">3</a>
        </div>
        <div class="example-block">
          <a href="#" class="example-link">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT-dX6VtCEwmyOiRVPyuZtz21XW5I9UHOKTweVNH_YsMbQ27iDI&usqp=CAU" alt="ВВЕДИ ТЕКСТ" class="example-img" width="220px" height="180px">
          </a>
          <a href="#" class="img-description">4</a>
        </div>
        <div class="example-block">
          <a href="#" class="example-link">
            <img src="https://i.pinimg.com/originals/39/0d/08/390d0886ce2a68b07c373fd985e149b7.jpg" alt="ВВЕДИ ТЕКСТ" class="example-img" width="220px" height="180px">
          </a>
          <a href="#" class="img-description">5</a>
        </div>
        <div class="example-block">
          <a href="#" class="example-link">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSavBcGnpgL6vBbBGoQN-IfWIiVTzZqWir2C-I3XKxUxkFmjuYN&usqp=CAU" alt="ВВЕДИ ТЕКСТ" class="example-img" width="220px" height="180px">
          </a>
          <a href="#" class="img-description">6</a>
        </div>
        <div class="example-block">
          <a href="#" class="example-link">
            <img src="https://i.pinimg.com/736x/3e/d5/6b/3ed56bc4cb07c557e7d212634734817d.jpg" alt="ВВЕДИ ТЕКСТ" class="example-img" width="220px" height="180px">
          </a>
          <a href="#" class="img-description">7</a>
        </div>
      </div>
      <button class="example-button-next" type="button" title="next">
        >
      </button>

</div>

Answer 1

Изучив эту технику можно приручить практически любой слайдер

const MIN = 0, MAX = 4
let counter = 0

left.addEventListener('click', next)
right.addEventListener('click', next)

function next(e) {
  counter += e.target.id === 'left' ? -1 : 1
  // не даем выйти за границы
  counter = Math.min(Math.max(MIN, counter), MAX)
  list.style.setProperty('--counter', counter)
}

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

article {
  display: flex;
}

div {
  height: 40vh;
  width: 60vw;
  overflow: hidden;
}

ul {
  height: 100%;
 
  display: flex;
  /* тут происходит наш вожделенный эффект прокрутки*/
  transform: translateX(calc(var(--counter) * -25%));
  transition: 1s;
  
  list-style: none;
}

li {
  min-width: 20%;
  margin: 0 2.5%;
  height: 100%;
  
  background-color: tomato;
}

button {
  padding: 0 2vw;
}

<article>
  <button id="left">left</button>
  <!-- Обертка внутри которой будет "скользить" список -->
  <!-- И которая будет скрывать вышедшие за её размеры  айтемы -->
  <div>
    <ul id="list" style="--counter: 0;">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <button id="right">right</button>
</article>

БЛОГ НА HUSL

не могу понять как создать слайдер на js

Ответы (1 шт):