<!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" />
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="slider-container">
<div class="slider-track">
<div class="slider-item">ddd</div>
<div class="slider-item">111</div>
<div class="slider-item">22</div>
</div>
</div>
<div class="slider-buttons">
<button class="btn-prev">Prev</button>
<button class="btn-next">Next</button>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="js/script.js"></script>
<script src="js/scriptJq.js"></script>
</body>
</html>let position = 0;
//Сколько будет показывать элеменов
const slidesToShow = 1;
//Сколько будет скролить
const slidesToScroll = 1;
const container = document.querySelector(".slider-container");
// лист с айтемами
const track = document.querySelector(".slider-track");
const btnPrev = document.querySelector(".btn-prev");
const btnNext = document.querySelector(".btn-next");
//Количество элементов
const items = document.querySelectorAll(".slider-item");
const itemsCount = items.length;
//Получаем ширину каждого элемента
const itemWidth = container.clientWidth / slidesToShow;
const movePosition = slidesToScroll * itemWidth;
for(let i = 0; i < itemsCount; i++) {
const cloneItem = items[i].cloneNode(true);
cloneItem.classList.add('cloneNode')
track.appendChild(cloneItem);
}
items.forEach((item) => {
item.style.minWidth = `${itemWidth}px`;
})
btnNext.addEventListener('click', () => {
const itemsLeft = itemsCount - (Math.abs(position) + slidesToShow * itemWidth) / itemWidth;
console.log(itemsLeft);
position -= itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth; ;
setPosition()
/* checkButtons() */
});
btnPrev.addEventListener('click', () => {
const itemsLeft = Math.abs(position) / itemWidth;
position += itemsLeft >= slidesToScroll ? movePosition : itemsLeft * itemWidth;
setPosition()
/* checkButtons() */
});
const setPosition = () => {
track.style.transform = `translateX(${position}px)`;
}
<body>
<div class="wrapper">
<div class="slider">
<div class="container">
<div class="slider__block">
<div class="slider__img">
</div>
<div class="slider__btn">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>const prevBtn = document.querySelector('.prev')
const nextBtn = document.querySelector('.next')
const outImg = document.querySelector('.slider__img')
const art1 = './img/art1.jpg'
const art2 = './img/art2.jpg'
const art3 = './img/art3.jpg'
const art4 = './img/art4.jpg'
const art5 = './img/art5.jpg'
const images = [art1, art2, art3, art4, art5]
let i = 0
outImg.innerHTML =`<img src=${images[i]}>`
nextBtn.onclick = () =>{
if(i < images.length - 1){
i++
}else{
i = 0
}
outImg.innerHTML =`<img src=${images[i]}>`
}
prevBtn.onclick = () =>{
if(i > 0 ){
i--
}else{
i = images.length-1
}
outImg.innerHTML =`<img src=${images[i]}>`
}
Средний