Dynamic Slider Atleast 4 blocks to slide

                    <!-- Slick Slider CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />

<!-- Slick Slider JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<section class="dynamic-image-slider" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <!-- Dynamic Section Title -->
  <div class="section-title">
    <h2>{{ section.settings.title }}</h2>
  </div>

  <!-- Image Slider Container -->
  <div class="slider-container">
    <div class="slider">
      {% for block in section.blocks %}
        {% assign image = block.settings.image %}
        {% if image %}
          <div class="slider-item slider-item-{{ block.id }}">
            <img src="{{ image | img_url: 'master' }}" alt="Slider Image {{ forloop.index }}" class="slider-image">
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>

  <!-- "Read Our Store" Link -->
  <div class="read-our-store-link">
    <a href="{{ section.settings.store_link }}" class="read-store-button">Read Our Store <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4 12H20M20 12L16 8M20 12L16 16" stroke="#ffffff" stroke-width="0.528" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg></a>
  </div>
</section>
<style>
  /* General Styles */
.dynamic-image-slider {
  width: 100%;
  position: relative;
  background-color: {{ section.settings.background_color }};
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
  text-align: center;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* Set default width for all items */
.slider-item {
  flex: 0 0 auto;
  width: 70%; /* Default width */
  height: 300px; /* Fixed height for images */
  padding: 10px;
  transition: width 0.3s ease;
}
  .slider-item.slick-prev,
.slider-item.slick-next {
  opacity: 0.7;
  transform: scale(0.9);
}


/* Increase width of the center slide */
.slider-item.slick-center {
  width: 90%; /* Increase width when the slide is centered */
}

/* Optional: If you want a smooth transition when the slide becomes active */
.slider-item.slick-active {
  transition: width 0.3s ease;
}

/* Optional: For the previous/next images, adjust their opacity or scale if desired */
.slider-item.slick-prev,
.slider-item.slick-next {
  opacity: 0.7; /* Optional fade effect */
  transform: scale(0.9); /* Optional scaling effect */
}

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

  .read-our-store-link a.read-store-button svg {
    width: 60px;
}
  .read-our-store-link a.read-store-button {
    display: flex;
    align-items: center;
    justify-content: center;
}
  .section-title {
    max-width: 1051px;
    margin: 0 auto;
}
.section-title p {
    color: #fff;
}
.slider-item {
  flex: 0 0 auto;
  width: 70%; /* Default smaller size */
  height: 300px; /* Set fixed height for images */
  padding: 10px;
  transition: width 0.3s ease;
}

.slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.slider-item.slick-center {
  width: 90%; /* Center image larger width */
}

.read-our-store-link {
  margin-top: 20px;
}

.read-store-button {
    text-decoration: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 5px;
    letter-spacing: 0em;
}


/* Slick Slider specific styles */
.slick-track {
  display: flex;
}

.slick-slide {
  transition: transform 0.3s ease;
}

/* Change the cursor to grab when dragging */
.slick-track {
  cursor: grab;
}

.slick-track:active {
  cursor: grabbing;
}

</style>

<script>
 $(document).ready(function() {
  $('.slider').slick({
    centerMode: true,                // Enables centered view
    infinite: true,                  // Infinite looping of slides
    centerPadding: '0',              // Removes padding on the centered image
    slidesToShow: 3,                 // Show 3 slides at a time
    speed: 500,                      // Transition speed
    focusOnSelect: true,             // Makes the center image clickable
    arrows: true,                    // Enable navigation arrows
    autoplay: true,                  // Enable autoplay
    autoplaySpeed: 2000,             // Autoplay speed in milliseconds
    draggable: true,                 // Enable dragging to slide
    swipe: true,                     // Enable swipe for touch devices
    touchMove: true,                 // Allows moving the slide with touch
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1,           // Show 1 slide on mobile
          centerPadding: '0',
          arrows: false              // Disable arrows on mobile
        }
      }
    ],
    // On 'afterChange', we can customize behavior for when slides change
    afterChange: function(event, slick, currentSlide) {
      // You can add custom JS behavior here when the slide changes
      // For example, updating the styling or triggering animations
      var totalSlides = slick.slideCount;
      var currentIndex = currentSlide + 1; // Since slick indexes start at 0
      if (currentIndex === 2) {
        // You can add any custom logic here when the second image is in focus
        console.log("Slide 2 is active");
      }
    }
  });
});


</script>



{% schema %}
{
  "name": "Dynamic  Slider",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "richtext",
      "id": "title",
      "label": "Section Title"
    },
    {
      "type": "url",
      "id": "store_link",
      "label": "Store Link (URL)",
      "default": "/collections/all"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 10
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 10
    }
  ],
  "blocks": [
    {
      "type": "image_block",
      "name": "Image Block",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Dynamic  Slider",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}