нужно сделать пагинацию 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>