Скрипт карусели "фото товара

index.html

    <div class="wrap_for_arrow">
        <!-- Слайд влево -->
        <span id="btn_left"></span>

        <div class="wrap_overflow">
            <div class="wrap-brand"> <!-- Обёртка для брэндов -->

                <a href="#"><img src="img/brand/brand_gipersport.svg" alt="gipersport"></a>
                <a href="#"><img src="img/brand/brand_mirsporta.svg" alt="mirsporta"></a>
                <a href="#"><img src="img/brand/brand_sportmaster.svg" alt="sportmaster"></a>
                <a href="#"><img src="img/brand/brand_gipersport.svg" alt="gipersport"></a>
                <a href="#"><img src="img/brand/brand_mirsporta.svg" alt="mirsporta"></a>
                <a href="#"><img src="img/brand/brand_sportmaster.svg" alt="sportmaster"></a>
                <a href="#"><img src="img/brand/brand_gipersport.svg" alt="gipersport"></a>
                <a href="#"><img src="img/brand/brand_mirsporta.svg" alt="mirsporta"></a>
                <a href="#"><img src="img/brand/brand_sportmaster.svg" alt="sportmaster"></a>
                <a href="#"><img src="img/brand/brand_gipersport.svg" alt="gipersport"></a>
                <a href="#"><img src="img/brand/brand_mirsporta.svg" alt="mirsporta"></a>
                <a href="#"><img src="img/brand/brand_sportmaster.svg" alt="sportmaster"></a>

            </div>
        </div>

        <!-- Слайд вправо -->
        <span id="btn_right"></span>
    </div>

js.js

  /*** Скрипт карусели "фото товара" ***/
  let chevron_left = document.querySelector('#btn_left')
  let chevron_right = document.querySelector('#btn_right')
  let list_img = document.querySelector('.wrap-brand')

  chevron_right ? chevron_right.addEventListener('click', move_right) : ''
  chevron_right ? chevron_right.addEventListener('touch', move_right) : ''
  chevron_left ? chevron_left.addEventListener('click', move_left) : ''
  chevron_left ? chevron_left.addEventListener('touch', move_left) : ''

  function move_right(e) {
    e.preventDefault()
    let el_container_width = list_img.offsetWidth;
    list_img.scrollLeft += el_container_width
  }

  function move_left(e) {
    e.preventDefault()
    let el_container_width = list_img.offsetWidth;
    list_img.scrollLeft -= el_container_width
  }

style.less

// Слайдер брэндов
.wrap_for_arrow {
  position: relative;

  .wrap_overflow {
    overflow: hidden;
    margin-bottom: 100px;
    max-height: 40px;

    .wrap-brand {
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      max-width: 100%;
      overflow-x: scroll;
      padding-bottom: 50px;
      scroll-behavior: smooth;

      a {
        width: 177px;
        height: 30px;
        min-width: 177px;
        min-height: 30px;
        margin-right: 30px;
      }
    }
  }
  #btn_left {
    position: absolute;
    top: -8px;
    left: -46px;
    display: inline-block;
    background: url(../img/arrow_in_circle/onblack.svg) center center/cover no-repeat no-repeat;
    width: 40px;
    height: 40px;
  }

  #btn_right {
    position: absolute;
    top: -8px;
    right: -46px;
    background: url(../img/arrow_in_circle/onblack.svg) center center/cover no-repeat no-repeat;
    width: 40px;
    height: 40px;
    transform: rotate(180deg);
  }
}