Responsive Shopify Banner Slider with Swiper.js – Customizable & SEO-Friendly

                    <!-- Swiper.js CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<section class="custom-banner-slider">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      {% for block in section.blocks %}
        <div class="swiper-slide" style="height: {{ section.settings.banner_height }}vh;">
          <div class="banner-image">
            <img src="{{ block.settings.slide_image | img_url: 'master' }}" alt="Banner Image">
            <div class="banner-overlay" style="opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }}"></div>
          </div>

          <!-- Content -->
          <div class="banner-content banner-position-{{ section.settings.desktop_content_position }}">
            <div class="banner-text-box color-{{ section.settings.color_scheme }}" style="text-align: {{ section.settings.text_alignment }};">
              <h2 class="banner-heading">{{ block.settings.slide_title }}</h2>
              <p class="banner-text">{{ block.settings.slide_text }}</p>
              {% if block.settings.button_text != blank %}
                <a href="{{ block.settings.button_link }}" class="banner-btn">{{ block.settings.button_text }}</a>
              {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>

    <!-- Custom Pagination -->
    <div class="swiper-pagination"></div>
  </div>
</section>

<style>
/* Main Banner Section */
.custom-banner-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.swiper-container {
  width: 100%;
  height: auto;
}

.swiper-slide {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  pointer-events: none;
}

/* Content */
.banner-content {
  position: absolute;
  width: 100%;
  max-width: 80%;
  padding: 20px;
}

/* Positioning - Keeps content box where user selects */
.banner-position-top-left { top: 10%; left: 10%; }
.banner-position-top-center { top: 10%; left: 50%; transform: translateX(-50%); }
.banner-position-top-right { top: 10%; right: 10%; }
.banner-position-middle-left { top: 50%; left: 10%; transform: translateY(-50%); }
.banner-position-middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.banner-position-middle-right { top: 50%; right: 10%; transform: translateY(-50%); }
.banner-position-bottom-left { bottom: 10%; left: 10%; }
.banner-position-bottom-center { bottom: 10%; left: 50%; transform: translateX(-50%); }
.banner-position-bottom-right { bottom: 10%; right: 10%; }

/* Text & Buttons */
.banner-heading {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: white;
}

.banner-text {
  font-size: 1.2rem;
  color: white;
}

.banner-btn {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  background: white;
  color: black;
  transition: background 0.3s;
}

.banner-btn:hover {
  background: #ccc;
}

/* Custom Pagination */
.swiper-pagination {
  bottom: 5% !important;
}

.swiper-pagination-bullet {
  background: #aaa;
  width: 80px;
  height: 12px;
  margin: 0 5px;
  border-radius: 10px;
  opacity: 0.5;
  transition: opacity 0.3s, width 0.3s;
}

.swiper-pagination-bullet-active {
  background: #fff;
  width: 120px;
  border-radius: 10px;
  opacity: 1;
}
  .banner-text-box p , .banner-text-box h2{
  color: {{section.settings.color}};
 
  }
.banner-overlay {
    display: block!important;
}
  @media(max-width:500px){
.swiper-pagination-bullet {
    width: 50px!important;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  var swiper = new Swiper('.swiper-container', {
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    effect: 'fade',
    speed: 800,
  });
});
</script>

{% schema %}
{
  "name": "Banner Slider",
  "settings": [
    {
      "type": "color",
      "id": "color",
      "label": "Text Color"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "Image Overlay Opacity",
      "default": 30
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "label": "Content Position",
      "options": [
        { "value": "top-left", "label": "Top Left" },
        { "value": "top-center", "label": "Top Center" },
        { "value": "top-right", "label": "Top Right" },
        { "value": "middle-left", "label": "Middle Left" },
        { "value": "middle-center", "label": "Middle Center" },
        { "value": "middle-right", "label": "Middle Right" },
        { "value": "bottom-left", "label": "Bottom Left" },
        { "value": "bottom-center", "label": "Bottom Center" },
        { "value": "bottom-right", "label": "Bottom Right" }
      ],
      "default": "middle-center"
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text Alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "banner_height",
      "label": "Banner Height",
      "default": 50,
      "min": 30,
      "max": 100,
      "step": 5,
      "unit": "vh"
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "slide_image",
          "label": "Slide Image"
        },
        {
          "type": "text",
          "id": "slide_title",
          "label": "Slide Title",
          "default": "Extremely Cosy And Soft Hijabs"
        },
        {
          "type": "richtext",
          "id": "slide_text",
          "label": "Slide Text",
          "default": "<p>Premium quality hijabs with ultimate comfort.</p>"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button Text",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        }
      ]
    }
  ]
}
{% endschema %}