title: Carousel card not working with the javascript
body: <p>Carousel not working please provide me guidelines to make it run.
  also, if possible make it infinite load on horizontal scroll.
  I tried but JavaScript is not working. Kindly provide me actual guidance to make it run.
  <a href="https://codepen.io/TA0011/pen/qBxqmYr" rel="nofollow noreferrer">https://codepen.io/TA0011/pen/qBxqmYr</a></p>
  <p><strong>Code</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let currentScrollPosition = 0;
  let scrollAmount = 320;
  
  const sCont = document.querySelector(".storys-conatainer");
  const hScroll = document.querySel ector(".horizontal-scroll");
  
  let maxScroll = -sCont.offsetWidth + hScroll.offsetWidth;
  
  function scrollHorizontally(val) {
    currentScrollPosition += (val * scrollAmount);
  
    sCont.style.left = currentScrollPosition + "px";</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style1.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
  
  
      &lt;div class="horizontal-scroll"&gt;
        &lt;button class="btn-scroll" id="btn-scroll-left" onclick="scrollHorizontally(1)"&gt;&lt;i class="fas fa-chevron-left"&gt;&lt;/i&gt;&lt;/button&gt;
  
        &lt;button class="btn-scroll" id="btn-scroll-right" onclick="scrollHorizontally(-1)"&gt;&lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;div class="storys-container"&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaibWeB6YHcbSZ05T8GEaAaxROO_JCdcYpjgU-rH_yS9IEduhj11ExA_yWVPKrTnqxJzg&amp;usqp=CAU" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="2.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="3.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="1.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="2.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="3.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="1.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="2.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="3.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="1.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="2.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="3.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="1.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="2.jpg" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="story-circle"&gt;
            &lt;img src="3.jpg" alt=""&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>