Не подключается JS

Question

в браузере не срабатывает слайдер. путь правильный. в чем может быть проблема? HTML

  <body>
    <div class="simple-slider-container">
      <a class="arrow" id="left" href="">←</a>
      <div class="slider">
        <ul class="items" id="items">
          <li class="item">1</li>
          <li class="item">2</li>
          <li class="item">3</li>
          <li class="item">4</li>
          <li class="item">5</li>
          <li class="item">6</li>
          <li class="item">7</li>
          <li class="item">8</li>
        </div>
      </li>
      <a class="arrow" id="right" href="">→</a>
    </div>
    <script src="./slider2.js"></script>
  </body>

CSS

.simple-slider-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
}

.arrow {
  font-size: 30px;
}

.slider {
  display: flex;
  width: 300px;
  overflow: hidden;
  margin: 0 10px;
}

.items {
  display: flex;
  position: relative;
  color: #444;
  font-size: 30px;
  right: 0;
  transition: right .3s;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: papayawhip;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid #444;
}

JS

const leftBtn = document.querySelector ('#left');
const rightBtn = document.querySelector ('#right');
const items = document.querySelector('#items');
const computedStyles = getComputedStyle(items);

rightBtn.addEventListener('click', (e) => {
  e.preventDefault ();
  let currentRight = parseInt(computedStyles.right); //преобразование в число right

  if (currentRight < 500) {
    items.style.right = '${currentRight + 100}px';
  };
});

leftBtn.addEventListener('click', (e) => {
  e.preventDefault ();
  let currentRight = parseInt(computedStyles.right);
  
  if (currentRight > 0) {
    items.style.right = '${currentRight - 100}px';
  };
});

БЛОГ НА HUSL

Не подключается JS

Ответы (0 шт):