0

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

// пагинация
// выбор требуемого элемента
const element = document.querySelector(".instruction__dots-block");
const imgCountPages = document.querySelectorAll(".instruction__slider-img").length;
let tessdsdst = Number(imgCountPages);
let totalPages = tessdsdst;
let page = 1;

// вызов функции с передачей параметров и добавлением внутреннего элемента, который является тегом ul
element.innerHTML = createPagination(totalPages, page);

function createPagination(totalPages, page) {
  let liTag = "";
  let active;
  let beforePage = page - 1;
  let afterPage = page + 1;
  if (page > 1) {
    // показать следующую кнопку, если значение страницы больше 1
    liTag += `<div class="btn prev" onclick="createPagination(totalPages, ${
      page - 1
    })"><span>Prev</span></div>`;
  }

  if (page > 2) {
    //  если значение страницы меньше 2, то добавьте 1 после предыдущей кнопки
    liTag += `<div class="instruction__dots-item" onclick="createPagination(totalPages, 1)"><span>1</span></div>`;
    if (page > 3) {
      // если значение страницы больше 3, добавьте это (...) после первого li или страницы
      liTag += `<div class="dots"><span>...</span></div>`;
    }
  }

  // сколько страниц или файлов отображается перед текущей строкой
  if (page == totalPages) {
    beforePage = beforePage - 2;
  } else if (page == totalPages - 1) {
    beforePage = beforePage - 1;
  }
  // сколько страниц или файлов отображается после текущей строки
  if (page == 1) {
    afterPage = afterPage + 2;
  } else if (page == 2) {
    afterPage = afterPage + 1;
  }

  for (var plength = beforePage; plength <= afterPage; plength++) {
    if (plength > totalPages) {
      // если длина больше общей длины страницы, продолжайте
      continue;
    }
    if (plength == 0) {
      // если длина p равна 0, то добавьте +1 к значению длины
      plength = plength + 1;
    }
    if (page == plength) {
      // если страница равна длине, то назначьте активную строку в активной переменной
      active = "active";
    } else {
      // в противном случае оставьте активную переменную пустой
      active = "";
    }
    liTag += `<div class="instruction__dots-item ${active}" onclick="createPagination(totalPages, ${plength})"><span>${plength}</span></div>`;
  }

  if (page < totalPages - 1) {
    // если значение страницы меньше значения totalPage на -1, то отображается последняя страница lior
    if (page < totalPages - 2) {
      // если значение страницы меньше значения totalPage на -2, добавьте это (...) перед последней страницей lior
      liTag += `<div class="dots"><span>...</span></div>`;
    }
    liTag += `
    <div class="instruction__dots-item" onclick="createPagination(totalPages, ${totalPages})"><span>${totalPages}</span></div>`;
  }

  if (page < totalPages) {
    // показать следующую кнопку, если значение страницы меньше, чем общая страница(20)
    liTag += `<div class="btn next" onclick="createPagination(totalPages, ${
      page + 1
    })"><span>Next</span></div>`;
  }
  element.innerHTML = liTag; // добавить тег li внутри тега ul
  return liTag; // верните тег li
}
// слайдер в секции инструкции
const imagesInstruction = document.querySelectorAll(".instruction__slider-img");
const sliderLineInstruction = document.querySelector(
  ".instruction__slider-line"
);
let dotsInstruction = document.querySelectorAll(".instruction__dots-item"),
  dotsAreaInstruction = document.querySelector(".instruction__dots-block");
let countInstruction = 0;
let widthInstruction;

function initInstruction() {
  //console.log('resize');
  widthInstruction = document.querySelector(".instruction__slider").offsetWidth;
  sliderLineInstruction.style.width =
    widthInstruction * imagesInstruction.length + "px";
  imagesInstruction.forEach((item) => {
    item.style.width = widthInstruction + "px";
    item.style.height = "auto";
  });
  rollSliderInstruction();
}

initInstruction();
window.addEventListener("resize", initInstruction);

document
  .querySelector(".instruction__slider-next")
  .addEventListener("click", () => scrollSlideInstruction(1));

document
  .querySelector(".instruction__slider-prev")
  .addEventListener("click", () => scrollSlideInstruction(-1));

dotsInstruction.forEach((dot, index) =>
  dot.addEventListener("click", () => {
    setSlideInstruction(index);
  })
);

function scrollSlideInstruction(direction) {
  countInstruction =
    (countInstruction + direction + imagesInstruction.length) %
    imagesInstruction.length;
  moveSlideInstruction();
}

function setSlideInstruction(index) {
  countInstruction = index;
  moveSlideInstruction();
}

function moveSlideInstruction() {
  document
    .querySelector(".instruction__dots-item.active")
    .classList.remove("active");
  document
    .querySelectorAll(".instruction__dots-item")[countInstruction].classList.add("active");

  rollSliderInstruction();
}

function rollSliderInstruction() {
  sliderLineInstruction.style.transform =
    "translate(-" + countInstruction * widthInstruction + "px)";
}

//   свайп слайдера
const isMobile = window.matchMedia("only screen and (max-width: 479px)");

if (isMobile.matches) {
  let startXInstruction = 0,
    startYInstruction = 0,
    moveXInstruction = 0,
    moveYInstruction = 0;
  sliderLineInstruction.addEventListener("touchstart", touchStartInstruction);
  sliderLineInstruction.addEventListener("touchmove", touchMoveInstruction);
  sliderLineInstruction.addEventListener("touchend", touchEndInstruction);

  function touchStartInstruction(e) {
    startXInstruction = e.changedTouches[0].screenX;
    // startY = e.changedTouches[0].clientY ;
  }

  function touchMoveInstruction(e) {
    moveXInstruction = e.changedTouches[0].screenX;
    // moveY = e.changedTouches[0].clientY ;
  }

  function touchEndInstruction() {
    if (startXInstruction + 100 < moveXInstruction) {
      // console.log('right');
      scrollSlideInstruction(-1);
    } else if (startXInstruction - 100 > moveXInstruction) {
      // console.log('left');
      scrollSlideInstruction(1);
    }
    if (startYInstruction + 100 < moveYInstruction) {
      // console.log('down');
    } else if (startYInstruction - 100 > moveYInstruction) {
      // console.log('up');
    }
  }
}
.slider,
.slider2,
.instruction__slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  user-select: none;
  touch-action: auto;
  -ms-touch-action: auto;
}

.instruction__slider {
  max-width: 915px;
  max-height: 700px;
  margin: 0 auto;
}

.slider__img,
.instruction__slider-img {
  width: 100%;
  height: auto;
}

.slider-line,
.slider-line2,
.instruction__slider-line {
  user-select: none;
  touch-action: auto;
  -ms-touch-action: auto;
  width: 100%;
  max-height: 716px;
  display: flex;
  position: relative;
  transition: all ease 0.5s;
}

.button__slider {
  position: absolute;
  top: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  background-position: center center;
  transform: translateY(-50%);
  background-size: 35%;
}

.slider-prev {
  left: 20px;
  background-image: url("../img/icons/prev.svg");
}

.slider-next {
  right: 20px;
  background-image: url("../img/icons/next.svg");
}

.dots-block,
.dots-block2 {
  position: absolute;
  display: flex;
  bottom: 30px;
  right: 50%;
  transform: translateX(50%);
}

.dots-item,
.dots-item2 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6f6f6f;
  border: 1px solid #6f6f6f;
}

.dots-item+.dots-item,
.dots-item2+.dots-item2 {
  margin-left: 5px;
}

.dots-item.active,
.dots-item2.active {
  background: rgba(255, 255, 255, 1);
}

.instruction__button-slider {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  img {
    object-fit: cover;
  }
}

.instruction__slider {
  margin-bottom: 20px;
}

.instruction__slider-prev {
  left: 20px;
}

.instruction__slider-next {
  right: 20px;
}

.instruction__dots-block {
  display: flex;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="ru">

<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">
  <link rel="stylesheet" href="css/style.css">
  <title>Карточка товара</title>
</head>

<body>
  <main class="main">
    <section class="instruction">
      <div class="container">
        <div class="instruction__inner">
          <div class="instruction__slider">
            <div class="instruction__slider-line">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
            </div>
            <button class="instruction__button-slider instruction__slider-prev">
                                -
                            </button>
            <button class="instruction__button-slider instruction__slider-next">
                                +
                            </button>
            <div class="instruction__dots-block">
            </div>
          </div>
        </div>
      </div>
    </section>
    </div>
    </div>
  </main>
  </div>
  <script src="js/cardProductSlider.js"></script>
</body>

</html>

1 ответ 1

1

Вы совершили в своём коде множество ошибок, я попробую перечислить все или по крайней мере большую их часть. Но прежде чем говорить об ошибках, следует сказать, что ваш код работает с логической ошибкой - можно пролистать вправо только 4 раза, потом в консоли появляется "Uncaught TypeError: Cannot read properties of undefined (reading 'classList')". Это первое, что следует исправить.
Я переписал ваш JavaScript полностью, теперь это рабочая версия вашего слайдера с пагинацией (но без ... - здесь думаю не будет проблем). Для сокращения кода я не писал часть для мобильных, а также resize. Не просматривал html и css, только немного добавил в css своего, а также не добавлял кнопку "Следующая" в пагинацию, т.к. это просто. Итак, об ошибках:

  1. Не пишите подряд let,let,let. Это ненужный код. Используйте запятую: let a = 1, b = 2, c = 3
  2. Не пишите в медиа запросе only screen, т.к. в 99,5% случаев мы подразумеваем в CSS устройства с дисплеем (screen)
  3. Называйте переменные правильнее (что за переменная tessdsdst вообще не понятно) и проще - слово Instruction тут почти везде лишнее
  4. Не ставьте ; - это почти всегда лишняя работа
  5. Вместо функций translate,translateX,translateY всегда используйте translate3d - она работает быстрее, т.к. использует ядро браузера, отвечающее за 3д-рендеринг, а это ядро чаще всего бездействует
  6. Для запуска кода всегда используйте обработчик событий "DOMContentLoaded", а для обработки кликов всегда используйте делегирование. Весь код должен быть замкнут.
  7. Не используйте в работе HTML атрибуты событий, такие как onclick,oninput и пр.

document.addEventListener("DOMContentLoaded",initSlider)
 
  function initSlider(){
  let activeSlideIndex = 0,
      slides = document.querySelectorAll(".instruction__slider-img"),
      slidesQuantity = slides.length,
      slidesContainer = document.querySelector(".instruction__slider-line"),
      slideWidth = slides[0].offsetWidth

      // init slider and clicks
      slidesContainer.style.width = slideWidth * slidesQuantity + "px"
      initSliderClicks()
      // init pagination
      initSliderPagination(slidesQuantity)

      function initSliderClicks(){
          document.addEventListener("click",(ev)=>{
            let target

            if(target = ev.target.closest(".instruction__slider-next")){
              switchSlide(1)
              return
            }
            if(target = ev.target.closest(".instruction__slider-prev")){
              switchSlide(-1)
              return
            }
            if(target = ev.target.closest(".pagination-item")){
              let neededIndex = target.dataset.index
              activeSlideIndex = +neededIndex
              let translateXvalue = activeSlideIndex * slideWidth
              slidesContainer.style.transform = `translate3d(-${translateXvalue}px, 0, 0)`
              switchPagination()
            }
          })
      }

      function switchSlide(direction){
          activeSlideIndex += direction
          if(activeSlideIndex === slidesQuantity) activeSlideIndex = 0
          if(activeSlideIndex < 0) activeSlideIndex = slidesQuantity - 1

          switchPagination()
          let translateXvalue = activeSlideIndex * slideWidth
          slidesContainer.style.transform = `translate3d(-${translateXvalue}px, 0, 0)`
      }

      function initSliderPagination(quantity){
          let paginationContainer = document.querySelector(".instruction__dots-block")
          for(let i = 0; i < quantity; i++){
            let spanElement = document.createElement("span")
            spanElement.classList.add("pagination-item")
            if(i === 0) spanElement.classList.add("active")
            spanElement.setAttribute("data-index",i)
            spanElement.innerHTML = i+1
            paginationContainer.appendChild(spanElement)
          }
      }

      function switchPagination(){
        document.querySelector(".pagination-item.active").classList.remove("active")
        document.querySelectorAll(".pagination-item")[activeSlideIndex].classList.add("active")
      }
    }
.slider,
.slider2,
.instruction__slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  user-select: none;
  touch-action: auto;
  -ms-touch-action: auto;
  padding-bottom: 50px;
}

.instruction__slider {
  max-width: 915px;
  max-height: 700px;
  margin: 0 auto;
}

.slider__img,
.instruction__slider-img {
  width: 100%;
  height: auto;
  max-width: 915px;
}

.slider-line,
.slider-line2,
.instruction__slider-line {
  user-select: none;
  touch-action: auto;
  -ms-touch-action: auto;
  width: 100%;
  max-height: 716px;
  display: flex;
  position: relative;
  transition: all ease 0.5s;
}

.button__slider {
  position: absolute;
  top: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-repeat: no-repeat;
  background-position: center center;
  transform: translateY(-50%);
  background-size: 35%;
}

.slider-prev {
  left: 20px;
  background-image: url("../img/icons/prev.svg");
}

.slider-next {
  right: 20px;
  background-image: url("../img/icons/next.svg");
}

.dots-block,
.dots-block2 {
  position: absolute;
  display: flex;
  bottom: 30px;
  right: 50%;
  transform: translateX(50%);
}

.dots-item,
.dots-item2 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6f6f6f;
  border: 1px solid #6f6f6f;
}

.dots-item+.dots-item,
.dots-item2+.dots-item2 {
  margin-left: 5px;
}

.dots-item.active,
.dots-item2.active {
  background: rgba(255, 255, 255, 1);
}

.instruction__button-slider {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.instruction__slider {
  margin-bottom: 20px;
}

.instruction__slider-prev {
  left: 20px;
}

.instruction__slider-next {
  right: 20px;
}

.instruction__dots-block {
  display: flex;
  justify-content: center;
}

.pagination-item{
  display: inline-block;
  cursor: pointer;
  margin-right: 15px;
  text-decoration: underline;
}
.pagination-item.active{
  color: orange;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="main">
    <section class="instruction">
      <div class="container">
        <div class="instruction__inner">
          <div class="instruction__slider">
            <div class="instruction__slider-line">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
              <img class="instruction__slider-img" src="https://omoro.ru/wp-content/uploads/2018/11/koty-50.jpg" alt="" draggable="false" width="100px" height="100px">
            </div>
            <button class="instruction__button-slider instruction__slider-prev">
                                &lt;
                            </button>
            <button class="instruction__button-slider instruction__slider-next">
                                &gt;
                            </button>
            <div class="instruction__dots-block">
            </div>
          </div>
        </div>
      </div>
    </section>
    </div>
    </div>
  </main>
    <script src="script.js"></script>
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.