Question

by Nikita_Lugovykh

HTML

<div class="portfolio__slider">
      <button class="portfolio__btn portfolio__btn_prev"><i class="fas fa-arrow-left"></i></button>
      <nav class="portfolio__menu">
          <ul class="portfolio__items-wrapper">
              <li class="portfolio__menu_item link-active" data-item="ALL">ALL</li>
              <li class="portfolio__menu_item" data-item="nature">Wild nature</li>
              <li class="portfolio__menu_item" data-item="animal">Animals</li>
              <li class="portfolio__menu_item" data-item="city">Cities</li>
              <li class="portfolio__menu_item" data-item="art">Arts</li>
              <li class="portfolio__menu_item" data-item="human">Human</li>
              <li class="portfolio__menu_item" data-item="city1">Cities1</li>
              <li class="portfolio__menu_item" data-item="art2">Arts2</li>
              <li class="portfolio__menu_item" data-item="human3">Human3</li>    
          </ul>
      </nav>
      <button class="portfolio__btn portfolio__btn_next"><i class="fas fa-arrow-right"></i></button>
  </div>

CSS

* {
    padding: 0;
    margin: 0;
}

.portfolio__slider {
    margin-left: 100px;
    display: flex;
    align-items: center;
}
.portfolio__menu {
    width: 500px;
    overflow: hidden;
   
}
.portfolio__items-wrapper {
    list-style-type: none;
    width: 9999px;
    transform: translateX(0);
    transition: transform .5s ease-in-out;
}
.portfolio__menu_item + .portfolio__menu_item {
    margin-left: 40px;
}

.portfolio__menu_item {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 75px;
    text-align: right;
    letter-spacing: 2px;
    color: #333333;
    padding: 0 5px;
    /* margin-left: 40px; */
    outline: none;
    cursor: pointer;
}
.portfolio__menu_item:hover {
    color: #9999;
}
.portfolio__menu_item:active {
    color: rgba(214, 124, 124, 0.87);
}

.link-active {}
.portfolio__btn{
    text-align: center;
    width: 40px;
    height: 40px;
    border: 0;
    background-color: transparent;
    background-color: tomato;
    border-radius: 50%;
} 
.portfolio__btn:hover {
    background-color: rgb(221, 221, 221);
    border-radius: 50%;
}
.portfolio__btn:active {
    transform: scale(1.1);
    transition: transform .1s linear;
}

JavaScript

const menu = document.querySelector('.portfolio__menu');
const items_wrapper = document.querySelector('.portfolio__items-wrapper');
const menu_items = document.querySelectorAll('.portfolio__menu_item');
const portfolio__btn_prev = document.querySelector('.portfolio__btn_prev');
const portfolio__btn_next = document.querySelector('.portfolio__btn_next');

menu.style.width = 350 + 'px';

let nextRightElement, nextLeftElement;

let position = 0;


menu.addEventListener('click', (e)=> {
  menu_items.forEach(item => {
    if(e.target === item) {
      portfolio__items.innerHTML = '';
      renderGridImgs(item.dataset.item); 
    }
  }) 
})

// NEXT ...........................................................................................................

portfolio__btn_next.addEventListener('click', ()=> { 
    
    nextRightElement = findNextElement();
    const cordsRightElem = nextRightElement.getBoundingClientRect().right;
    let {right: menuCord_r} = menu.getBoundingClientRect();

    position -= cordsRightElem - menuCord_r;
    items_wrapper.style.transform = `translateX(${position}px)`;

    findNextLeftElement()
});


// ............................................................................................................

// PREV .......................................................................................................

portfolio__btn_prev.addEventListener('click', ()=> {

    nextLeftElement = findNextLeftElement();
    const cordsLeftElem = nextLeftElement.getBoundingClientRect().left || 0;

    let {left: menuCord_l} = menu.getBoundingClientRect();

  
    position += menuCord_l - cordsLeftElem;
    items_wrapper.style.transform = `translateX(${position}px)`;



});
// .........................................................................................................................



function findNextElement(){

  const menuCord_r = menu.getBoundingClientRect().right;
  
  for (let i = 0; i < menu_items.length; i++) {
    const...