Untitled

<style>
.sliderContainer {
  padding: 5rem 0; /* Reduced padding, adjust as needed */
}

.sample-slider {
  width: 100%; /* Use 100% of the container width */
  max-width: 1200px; /* You can set a max-width to control the size */
  margin: 0 auto; /* This will center the slider in the container */
}

.swiper-wrapper {
  width: 100%; /* Adjusted to 100% for responsiveness */
}

.sample-slider img {
  width: auto; /* Maintain original image aspect ratio */
  max-width: 100%; /* Ensure image is not larger than its container */
  height: auto; /* Maintain original image aspect ratio */
  border-radius: 15px; /* Adjusted for a subtler curve, change as needed */
  opacity: 0.7; /* Slightly more visible than before */
  transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.swiper-slide {
  padding: 0 5px; /* Reduced padding for less space between slides */
}


</style>

<!-- Start of Custom Slider Section -->
<div class="sliderContainer" style="padding-top: 3rem; background-color: unset;">
  <div class="swiper sample-slider" style="width: 90%;">
    <div class="swiper-wrapper">
      {% for block in section.blocks %}
        <div class="swiper-slide">
          {% if block.settings.url != blank %}
            <a href="{{ block.settings.url }}" target="_blank">
              <img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.image.alt | escape }}">
            </a>
          {% else %}
            <img src="{{ block.settings.image | img_url: 'master' }}" alt="{{ block.settings.image.alt | escape }}">
          {% endif %}
        </div>
      {% endfor %}
    </div>
    <!-- Add Pagination and Navigation Here if Needed -->
  </div>
</div>
<!-- End of Custom Slider Section -->

{% schema %}
{
  "name": "Custom Slider",
  "max_blocks": 5,
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "url",
          "label": "Image Link",
          "info": "Optional. If provided, clicking the image will navigate to this URL."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Custom Gallery"
    }
  ]
}
{% endschema %}



<script>
// Assuming Swiper's JS and CSS are included in your theme
document.addEventListener('DOMContentLoaded', function () {
  const sampleSlider = new Swiper('.sample-slider', {
    loop: true,
    slidesPerView: 1.5, // Adjusted for a peek effect, can change based on design needs
    centeredSlides: true,
    spaceBetween: 10, // Reduced space between slides
    breakpoints: {
      // When window width is >= 640px
      640: {
        slidesPerView: 3,
        spaceBetween: 10 // Reduced space between slides for larger screens
      },
      // When window width is >= 768px
      768: {
        slidesPerView: 4,
        spaceBetween: 15 // Slightly more space for even larger screens, adjust as needed
      }
    }
    // Add more options here as needed, like pagination, navigation, etc.
  });
});
</script>