Как уменьшить код и заставить работать 2 слайдера на странице?
Делаю велосипеды на js и столкнулся с проблемой что не знаю как можно сделать 2 слайдера на 1 странице (ну как не знаю, знаю, но много кода). Как уменьшить все это и сделать правильнее?
let position = 0;
const wedoContainer = document.querySelector('.wedo__slider-container');
const wedoTrack = document.querySelector('.wedo__slider-track');
const wedoItems = document.querySelectorAll('.wedo__slider-item');
const wedoBtnPrev = document.querySelector('.wedo__button-prev');
const wedoBtnNext = document.querySelector('.wedo__button-next');
const wedoItemsCount = wedoItems.length
const wedoItemWidth = wedoContainer.clientWidth / 1;
const wedoMovePosition = 1 * wedoItemWidth;
const workContainer = document.querySelector('.works__slider-container');
const workTrack = document.querySelector('.works__slider-track');
const workItems = document.querySelectorAll('.works__slider-item');
const workBtnPrev = document.querySelector('.works__button-prev');
const workBtnNext = document.querySelector('.works__button-next');
const workItemsCount = workItems.length
const workItemWidth = workContainer.clientWidth / 1;
const workMovePosition = 1 * workItemWidth;
wedoItems.forEach(item => {
item.style.minWidth = `${wedoItemWidth}px`
})
wedoBtnPrev.addEventListener('click', () => {
const itemsLeft = Math.abs(position) / wedoItemWidth
position += itemsLeft >= 1 ? wedoMovePosition : itemsLeft * wedoItemWidth
wedoSetPosition()
})
wedoBtnNext.addEventListener('click', () => {
const itemsLeft = wedoItemsCount - (Math.abs(position) + 1 * wedoItemWidth) / wedoItemWidth
position -= itemsLeft >= 1 ? wedoMovePosition : itemsLeft * wedoItemWidth
wedoSetPosition()
})
function wedoSetPosition() {
wedoTrack.style.transform = `translateX(${position}px)`
}
workItems.forEach(item => {
item.style.minWidth = `${workItemWidth}px`
})
workBtnPrev.addEventListener('click', () => {
const itemsLeft = Math.abs(position) / workItemWidth
position += itemsLeft >= 1 ? workMovePosition : itemsLeft * workItemWidth
workSetPosition()
})
workBtnNext.addEventListener('click', () => {
const itemsLeft = workItemsCount - (Math.abs(position) + 1 * workItemWidth) / workItemWidth
position -= itemsLeft >= 1 ? workMovePosition : itemsLeft * workItemWidth
workSetPosition()
})
function workSetPosition() {
workTrack.style.transform = `translateX(${position}px)`
}
.slider {
margin-top: 120px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.wedo__slider {
background-color: #f8f8f8;
padding: 70px 0;
}
.works__slider {
margin-bottom: 130px;
}
.slider__container {
overflow: hidden;
max-width: 980px;
}
.slider__track {
display: flex;
transition: 0.5s;
}
.slider__item {
min-width: 980px;
display: flex;
justify-content: center;
align-items: center;
}
.slider__item-img {
margin-right: 55px;
}
.wedo__slider-img {
padding: 45px;
border: 3px solid #95e1d3;
}
.slider__item-content {
max-width: 770px;
}
.slider__item-text {
font-family: "Roboto", sans-serif;
font-style: italic;
font-size: 24px;
line-height: 36px;
color: #999999;
margin-bottom: 20px;
}
.slider__item-name {
font-family: "Kaushan Script", cursive;
font-size: 24px;
color: #333333;
padding-left: 70px;
position: relative;
}
.slider__item-name::before {
position: absolute;
content: "";
width: 60px;
height: 3px;
background-color: #f38181;
left: 0;
top: 50%;
margin-top: -3px;
}
.slider__buttons {
position: absolute;
width: 1150px;
}
.button-prev {
position: absolute;
left: 0;
width: 22px;
height: 12px;
background: url(../images/svg/arrow.svg) no-repeat;
transform: rotate(95deg);
}
.button-next {
position: absolute;
right: 0;
width: 22px;
height: 12px;
background: url(../images/svg/arrow.svg) no-repeat;
transform: rotate(-95deg);
}
<div class="slider wedo__slider">
<div class="slider__container wedo__slider-container">
<div class="slider__track wedo__slider-track">
<div class="slider__item wedo__slider-item">
<div class="slider__item-img wedo__slider-img">
<img src="images/svg/10.svg" alt="">
</div>
<div class="slider__item-content">
<div class="slider__item-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”
</div>
<div class="slider__item-name">Jon Doe</div>
</div>
</div>
<div class="slider__item wedo__slider-item">
<div class="slider__item-img wedo__slider-img">
<img src="images/svg/10.svg" alt="">
</div>
<div class="slider__item-content">
<div class="slider__item-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”
</div>
<div class="slider__item-name">Jon Doe</div>
</div>
</div>
<div class="slider__item wedo__slider-item">
<div class="slider__item-img wedo__slider-img">
<img src="images/svg/10.svg" alt="">
</div>
<div class="slider__item-content">
<div class="slider__item-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”
</div>
<div class="slider__item-name">Jon Doe</div>
</div>
</div>
</div>
</div>
<div class="slider__buttons">
<button class="button-prev wedo__button-prev"></button>
<button class="button-next wedo__button-next"></button>
</div>
</div>
<div class="slider works__slider">
<div class="slider__container works__slider-container">
<div class="slider__track works__slider-track">
<div class="slider__item works__slider-item">
<div class="slider__item-img works__slider-img">
<img src="images/work/08.webp" alt="">
</div>
<div class="slider__item-content">
<div class="slider__item-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”
</div>
<div class="slider__item-name">Joshua Earle</div>
</div>
</div>
<div class="slider__item works__slider-item">
<div class="slider__item-img works__slider-img">
<img src="images/work/08.webp" alt="">
</div>
<div class="slider__item-content">
<div class="slider__item-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”
</div>
<div class="slider__item-name">Joshua Earle</div>
</div>
</div>
<div class="slider__item works__slider-item">
<div class="slider__item-img works__slider-img">
<img src="images/work/08.webp" alt="">
</div>
<div class="slider__item-content">
<div class="slider__item-text">
“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.”
</div>
<div class="slider__item-name">Joshua Earle</div>
</div>
</div>
</div>
</div>
<div class="slider__buttons">
<button class="button-prev works__button-prev"></button>
<button class="button-next works__button-next"></button>
</div>
</div>