Automactic Product Slider

                    <section class="slick-product-slider" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="page-width slick-slider-container">
    <!-- Left Side Content -->
    <div class="slider-left-content">
      <h2 style="color: {{ section.settings.title_color }}; font-size: {{ section.settings.title_size }}px;">{{ section.settings.title }}</h2>
      <p style="color: {{ section.settings.description_color }}; font-size: {{ section.settings.description_size }}px;">{{ section.settings.description }}</p>
      <div class="slider-nav">
        <button class="slider-prev">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12H18M6 12L11 7M6 12L11 17" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
        </button>
        <button class="slider-next">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
        </button>
      </div>
    </div>

    <!-- Right Side Slider -->
    <div class="slider-wrapper">
      <div class="slick-slider">
        {% if section.settings.collection != blank %}
          {% assign products = collections[section.settings.collection].products %}
          {% for product in products %}
            <div class="slider-item">
              <a href="{{ product.url }}">
                <img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{ product.title }}" />
                <h3>{{ product.title }}</h3>
                <p>{{ product.price | money }}</p>
              </a>
            </div>
          {% endfor %}
        {% else %}
          {% for block in section.blocks %}
            {% if block.settings.selected_product != blank %}
              {% assign product = all_products[block.settings.selected_product] %}
              <div class="slider-item">
                <a href="{{ product.url }}">
                  <img src="{{ product.featured_image | img_url: '600x600' }}" alt="{{ product.title }}" />
                  <h3>{{ product.title }}</h3>
                  <p>{{ product.price | money }}</p>
                </a>
              </div>
            {% endif %}
          {% endfor %}
        {% endif %}
      </div>
    </div>
  </div>
</section>

<style>
.slick-product-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.slick-product-slider .slick-slider-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 20px;
  align-items: center;
}

.slick-product-slider .slider-left-content {
  text-align: left;
}

.slick-product-slider .slider-left-content h2 {
  margin: 0 0 10px;
}

.slick-product-slider .slider-nav {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.slick-product-slider .slider-nav button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.slick-product-slider .slider-wrapper {
  overflow: hidden;
  position: relative;
}

.slick-product-slider .slick-slider .slider-item {
  flex: 0 0 auto;
  width: 300px;
  height: 600px;
  padding: 20px;
  text-align: left;
  transition: transform 0.3s ease;
}

.slick-product-slider .slick-slider .slider-item img {
  width: 100%;
  height: 75%;
  object-fit: cover;
}

.slick-product-slider .slick-slider .slider-item h3 {
  margin: 10px 0 5px;
  font-size: 18px;
}

.slick-product-slider .slick-slider .slider-item a {
  text-decoration: none;
}

.slick-product-slider .slick-slider .slider-item p {
  margin: 0;
  font-size: 16px;
  color: #000;
}

.slick-product-slider .slick-slider .slider-item:hover {
  transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .slick-product-slider .slick-slider-container {
    grid-template-columns: 1fr;
  }

  .slick-product-slider .slider-left-content {
    margin-bottom: 20px;
  }

  .slick-product-slider .slick-slider .slider-item {
    width: 260px;
    height: 500px;
  }

  .slick-product-slider .slick-slider .slider-item h3 {
    font-size: 16px;
  }

  .slick-product-slider .slick-slider .slider-item p {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .slick-product-slider .slick-slider-container {
    grid-template-columns: 1fr;
  }

  .slick-product-slider .slick-slider .slider-item {
    width: 200px;
    height: 400px;
  }

  .slick-product-slider .slick-slider .slider-item h3 {
    font-size: 14px;
  }

  .slick-product-slider .slick-slider .slider-item p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
body .slick-product-slider .slick-slider .slider-item {
    width: 100%;
    padding: 0;
    height: 460px;
}

}

</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />

<script>
$(document).ready(function () {
  // Initialize Slick Slider
  $('.slick-slider').slick({
    infinite: true,
    slidesToShow: 3, // Adjust for desktop
    slidesToScroll: 1,
    prevArrow: $('.slider-prev'),
    nextArrow: $('.slider-next'),
    autoplay: true,
    autoplaySpeed: 3000,
    responsive: [
      {
        breakpoint: 1024, // Tablet
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1,
        },
      },
      {
        breakpoint: 768, // Mobile
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  });
});
</script>


{% schema %}
{
  "name": "Slick Product Slider",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 5
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 5
    },
    {
      "type": "text",
      "id": "title",
      "label": "Section Title",
      "default": "Aromas"
    },
    {
      "type": "text",
      "id": "description",
      "label": "Section Description",
      "default": "Exists at the intersection of skin science and grounding practice; restoring skin equilibrium."
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "description_color",
      "label": "Description Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "title_size",
      "label": "Title Font Size",
      "default": 24,
      "min": 14,
      "max": 48,
      "step": 2
    },
    {
      "type": "range",
      "id": "description_size",
      "label": "Description Font Size",
      "default": 16,
      "min": 12,
      "max": 24,
      "step": 1
    },
    {
      "type": "header",
      "content": "Atleast 4 Product is required to slide the slider"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Select Collection",
      "info": "Products from this collection will automatically display in the slider."
    }
  ],
  "blocks": [
    {
      "type": "product",
      "name": "Product",
      "settings": [
           {
      "type": "header",
      "content": "Atleast 4 Product is required to lide the slider"
    },
        {
          "type": "product",
          "id": "selected_product",
          "label": "Select Product"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Slick Product Slider",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}