why this is not on carousel slider can anyone check the code

[Manishuk01]

 website -  https://g8tiyz-ui.myshopify.com/?_ab=0&_fd=0&_sc=1

<section class="all-collections">

   <h1>Feature Collection</h1>
   <div class="collection-container">
    <div class="collection-Wrapper">
      {% for collection in collections %}
        <div class="Collection-card">
          <img
            width="500"
            height="625"
            loading="lazy"
            src="{{ collection.featured_image | image_url }}"
            >
          <h3>{{  collection.title | link_to: collection.url }} </h3>
        </div>
         
        {%  endfor %}
    
   </div>
   </div>
</section>


<style>
  .all-collections {
    backgroud: {{ section.settings.background }}
      ;
    color: {{ section.settings.text_color }}
      ;
    padding: 10px;}

  .collection-container {
    position: relative;
    overflow-x: scroll;
  }
   .all-collections-wrapper {
    display: flex;
    transition: transform 0.3s ease; /* Add smooth transition effect */
  }

  .collection-card {
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .collection-card h3 a {
    color: black;
    text-decoration: none
  }

  .collection-card a:hover {
    text-decoration: underline;
  }
</style>


{% schema %}
  {
    "name": "Section name",
    "settings": [
      {
        "type": "color",
        "id": "background",
        "label": "Background",
        "default": "#F4F4F4"
      },
      {
        "type": "color",
        "id": "text_color",
        "label": "Text",
        "default": "#000000"
      }
   ],
    "presets": [
      {
        "name": "all-collections"
      }
    ]
  }
{% endschema %}

[EcomGraduates]

Your code isn't working as a carousel because it's missing the proper structure for a slider. Right now, it just displays collections in a horizontally scrollable div, but there's no functionality to slide between items.

The first issue is with your .collection-container. It has overflow-x: scroll, which allows horizontal scrolling, but there's no JavaScript to make it slide like a proper carousel.

The second issue is that you are using .all-collections-wrapper in your CSS, but it's not actually in your HTML. The correct div that wraps the collections is .collection-container