How can I minify the code and make 2 sliders per page work?

I want to make 2 sliders in pure js, but the code is too long, but I can't reduce it, please tell me how to do it

code pen

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>

JavaScript Anonymous, Sep 21, 2019

1 Answers

0
I understand that you need everything to work like this code
Anonymous

Your Answer

To place the code, please use CodePen or similar tool. Thanks you!