How to move navigation button icon outside the image

Shopify Discussion
1

I made a swiper slideshow component in my dawn theme. In which i want to give the navigation button outside of the image I tried a lot but got failed. I gave the negative value for the navigation button but after giving negative value I cannot see the navigation button outside the image I don’t know where I’m missing please help. In the picture you can see the navigation button is on the image. I attached the code also. I cannot share my store url.

riya298_0-1744619255157.png
riya298_0-1744619255157.png999×270 217 KB

{%- style -%}
/* Default swiper styling (when overlay is disabled) */
.swiper-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 15rem;
  height: 80vh;
  background-color: {{ section.settings.background_color }};
  position: relative;
}

/* When overlay is enabled */
.swiper-overlay-enabled {
  width: 100%;
}

/* Make sure the swiper doesn't cover the entire header */
.swiper-overlay-enabled .swiper-slide {
  padding-top: 20vh; /* Adjust this based on your needs */
}
  

  #Swiper-{{ section.id }} {
    position: relative;
    transform: translateY(1rem);
    width: 100%;
    height: 85vh;
    overflow: hidden;
    background: black;
  }

  #Swiper-{{ section.id }} .swiper-slide {
    display: flex;
    align-items: stretch;
    justify-content: center;
    {% if section.settings.slide_height == 'adapt' %}
      /* Adapt to image height */
      height: auto;
    {% elsif section.settings.slide_height == 'small' %}
      height: 300px;
    {% elsif section.settings.slide_height == 'medium' %}
      height: 800px;
    {% elsif section.settings.slide_height == 'large' %}
      height: 900px;
    {% endif %}
    overflow: hidden;
    position: relative; 
  }

  #Swiper-{{ section.id }} .swiper-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }
  #Swiper-{{ section.id }} .swiper-image-container.blur-effect .swiper-image {
  filter: blur(3px);
  transition: filter 0.3s ease;
}

  #Swiper-{{ section.id }} .swiper-image-container.half-width {
    width: 50%;
  }

  #Swiper-{{ section.id }} .swiper-image {
    {% if section.settings.slide_height == 'adapt' %}
      width: 100%;
      height: auto;
      max-width: 100%;
      object-fit: contain;
    {% else %}
      {% if section.settings.image_fit == 'cover' %}
        width: 100%;
        height: 100%;
        object-fit: cover;
      {% else %}
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
      {% endif %}
    {% endif %}
    display: block;
  }

   /* Image opacity control */
  #Swiper-{{ section.id }} .swiper-slide img,
  #Swiper-{{ section.id }} .swiper-image {
    opacity: {{ section.settings.image_opacity | divided_by: 100.0 }};
  }

  #Swiper-{{ section.id }} .swiper-content-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 5; 
    pointer-events: none; 
    padding: 20px;
    box-sizing: border-box;
    
    /* Content positioning based on settings */
    {% case section.settings.content_position %}
      {% when 'top_left' %}
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
      {% when 'top_center' %}
        align-items: flex-start;
        justify-content: center;
        text-align: center;
      {% when 'top_right' %}
        align-items: flex-start;
        justify-content: flex-end;
        text-align: right;
      {% when 'middle_left' %}
        align-items: center;
        justify-content: flex-start;
        text-align: left;
      {% when 'middle_center' %}
        align-items: center;
        justify-content: center;
        text-align: center;
      {% when 'middle_right' %}
        align-items: center;
        justify-content: flex-end;
        text-align: right;
      {% when 'bottom_left' %}
        align-items: flex-end;
        justify-content: flex-start;
        text-align: left;
      {% when 'bottom_center' %}
        align-items: flex-end;
        justify-content: center;
        text-align: center;
      {% when 'bottom_right' %}
        align-items: flex-end;
        justify-content: flex-end;
        text-align: right;
    {% endcase %}
  }

  #Swiper-{{ section.id }} .swiper-content-box {
    background-color: {{ section.settings.content_background | color_modify: 'alpha', section.settings.content_opacity }};
    padding: 20px;
    max-width: 80%;
    border-radius: 4px;
    pointer-events: auto; 
    width: auto;
    min-width: 200px;
    box-sizing: border-box;
    margin-right: 20px; /* Prevent right-aligned content from being cut off */
    margin-left: 20px; /* Prevent left-aligned content from being cut off */
  }

  #Swiper-{{ section.id }} .swiper-heading {
    margin-top: 0;
    margin-bottom: 10px;
    color: {{ section.settings.heading_color }};
    font-size: {{ section.settings.heading_size }}px;
    font-weight: bold;
    line-height: 1.0;
    word-wrap: break-word;
  }

  #Swiper-{{ section.id }} .swiper-title {
    margin-top: 0;
    margin-bottom: 15px;
    color: {{ section.settings.title_color }};
    font-size: {{ section.settings.title_size }}px;
    line-height: 1.0;
    word-wrap: break-word;
  }

    #Swiper-{{ section.id }} .swiper-subtitle {
    margin-top: 0;
    margin-bottom: 15px;
    color: {{ section.settings.text_color }};
    font-size: {{ section.settings.text_size }}px;
    line-height: 1.0;
    word-wrap: break-word;
  }

  #Swiper-{{ section.id }} .button-container {
    {% case section.settings.button_position %}
      {% when 'left' %}
        text-align: left;
      {% when 'center' %}
        text-align: center;
      {% when 'right' %}
        text-align: right;
    {% endcase %}
    pointer-events: auto;
  }

  #Swiper-{{ section.id }} .swiper-button-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: {{ section.settings.button_background }};
    color: {{ section.settings.button_text_color }};
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
    border: none;
    font-size: 16px;
    line-height: 1.6;
  }

  #Swiper-{{ section.id }} .swiper-button-link:hover {
    background-color: {{ section.settings.button_background | color_darken: 10 }};
    transform: translateY(-2px);
  }

  #Swiper-{{ section.id }} .swiper-button-next,
  #Swiper-{{ section.id }} .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  #Swiper-{{ section.id }} .swiper-button-next {
    right: 8px;
  }

  #Swiper-{{ section.id }} .swiper-button-prev {
    left: 8px;
  }

  #Swiper-{{ section.id }} .swiper-button-next:after,
  #Swiper-{{ section.id }} .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 24px;
    color: #FFFFFF;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
  }

  #Swiper-{{ section.id }} .swiper-button-prev:after {
    content: 'prev';
  }

  #Swiper-{{ section.id }} .swiper-button-next:after {
    content: 'next';
  }

  #Swiper-{{ section.id }} .swiper-pagination {
    position: relative;
    bottom: 0;
    padding-top: 15px;
    z-index: 10; /* Ensure pagination is above content */
  }

  #Swiper-{{ section.id }} .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    opacity: 0.7;
  }

  #Swiper-{{ section.id }} .swiper-pagination-bullet-active {
    background-color: {{ section.settings.pagination_color }} !important;
    opacity: 1;
  }

  /* Fix for image aspect ratio in different modes */
  {% if section.settings.slide_height == 'adapt' %}
  #Swiper-{{ section.id }} .swiper-slide {
    aspect-ratio: auto;
  }
  {% endif %}

  /* Placeholder styling */
  #Swiper-{{ section.id }} .placeholder-svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  /* Tablet styles */
  @media screen and (max-width: 990px) {
    #Swiper-{{ section.id }} {
      height: auto;
      min-height: 60vh;
    }

    #Swiper-{{ section.id }} .swiper-slide {
      height: auto;
      min-height: 60vh;
    }

    #Swiper-{{ section.id }} .swiper-image-container {
      height: auto;
      min-height: 60vh;
    }

    #Swiper-{{ section.id }} .swiper-heading {
      font-size: {{ section.settings.heading_size | times: 0.9 }}px;
    }

    #Swiper-{{ section.id }} .swiper-title {
      font-size: {{ section.settings.title_size | times: 0.9 }}px;
    }

    #Swiper-{{ section.id }} .swiper-subtitle {
      font-size: {{ section.settings.text_size | times: 0.9 }}px;
    }
    
    #Swiper-{{ section.id }} .swiper-content-box {
      max-width: 85%;
      padding: 15px;
      min-width: 180px;
    }
    
    #Swiper-{{ section.id }} .swiper-button-link {
      padding: 8px 16px;
      font-size: 14px;
    }
  }

  /* Mobile styles */
  @media screen and (max-width: 768px) {
    .swiper-container {
      padding: 0;
      height: auto;
    }

    #Swiper-{{ section.id }} {
      height: auto;
      min-height: 60vh;
      transform: translateY(3rem);
    }

    #Swiper-{{ section.id }} .swiper-slide {
      flex-direction: column;
      height: auto;
      min-height: 60vh;
    }

    #Swiper-{{ section.id }} .swiper-image-container {
      width: 100%;
      height: auto;
      min-height: 60vh;
    }

    #Swiper-{{ section.id }} .swiper-image-container.half-width {
      width: 100%;
      height: auto;
      min-height: 30vh;
    }

    #Swiper-{{ section.id }} .swiper-navigation-container {
      width: calc(100% + 80px);
      left: -40px;
    }

    #Swiper-{{ section.id }} .swiper-button-next,
    #Swiper-{{ section.id }} .swiper-button-prev {
      width: 40px;
      height: 40px;
    }

    #Swiper-{{ section.id }} .swiper-button-next {
      right: 10px;
    }

    #Swiper-{{ section.id }} .swiper-button-prev {
      left: 10px;
    }

    #Swiper-{{ section.id }} .swiper-button-next:after,
    #Swiper-{{ section.id }} .swiper-button-prev:after {
      font-size: 18px;
    }
    
    #Swiper-{{ section.id }} .swiper-heading {
      font-size: {{ section.settings.heading_size | times: 0.7 }}px;
      margin-bottom: 5px;
    }

    #Swiper-{{ section.id }} .swiper-title {
      font-size: {{ section.settings.title_size | times: 0.8 }}px;
      margin-bottom: 10px;
    }

    #Swiper-{{ section.id }} .swiper-subtitle {
      font-size: {{ section.settings.text_size | times: 0.8 }}px;
      margin-bottom: 10px;
    }
    
    #Swiper-{{ section.id }} .swiper-content-box {
      max-width: 90%;
      padding: 12px;
      min-width: 150px;
      margin: 10px auto;
    }
    
    #Swiper-{{ section.id }} .swiper-button-link {
      padding: 6px 12px;
      font-size: 12px;
      margin-top: 8px;
    }
    
    #Swiper-{{ section.id }} .swiper-content-container {
      padding: 10px;
    }
    
    /* Ensure content stays within its container on mobile */
    #Swiper-{{ section.id }} .swiper-image-container .swiper-content-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
{%- endstyle -%}

<div class="section-{{ section.id }}-padding">
  <div class="swiper-container {% if section.settings.swiper_overlay_enabled %}swiper-overlay-enabled{% endif %}" 
     data-overlay-amount="{{ section.settings.overlay_amount }}">
    <div class="swiper" id="Swiper-{{ section.id }}">
      <div class="swiper-wrapper">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {% when 'slide' %}
              <div class="swiper-slide" {{ block.shopify_attributes }}>
                {%- if block.settings.image != blank -%}
                  <div class="swiper-image-container {% if block.settings.second_image != blank %}half-width{% endif %}">
                    {% if section.settings.slide_height == 'adapt' %}
                      {{ block.settings.image | image_url: width: 1500 | image_tag:
                        loading: 'lazy',
                        class: 'swiper-image',
                        sizes: '100vw',
                        alt: block.settings.image.alt | default: block.settings.heading | escape
                      }}
                    {% else %}
                      {% assign img_url = block.settings.image | image_url: width: 1500 %}
                      <img
                        src="{{ img_url }}"
                        loading="lazy"
                        class="swiper-image"
                        alt="{{ block.settings.image.alt | default: block.settings.heading | escape }}"
                        width="{{ block.settings.image.width }}"
                        height="{{ block.settings.image.height }}"
                      >
                    {% endif %}
                    
                    {% if block.settings.heading != blank or block.settings.text != blank or block.settings.button_label != blank %}
                      <div class="swiper-content-container">
                        <div class="swiper-content-box">
                          {% if block.settings.heading != blank %}
                            <h2 class="swiper-heading">{{ block.settings.heading }}</h2>
                          {% endif %}

                          {% if block.settings.title != blank %}
                            <div class="swiper-title">{{ block.settings.title }}</div>
                          {% endif %}
                          
                          {% if block.settings.text != blank %}
                            <div class="swiper-subtitle">{{ block.settings.text }}</div>
                          {% endif %}
                          
                          {% if block.settings.button_label != blank %}
                            <div class="button-container">
                              <a href="{{ block.settings.button_link | default: '#' }}" class="swiper-button-link">
                                {{ block.settings.button_label }}
                              </a>
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  
                  {%- if block.settings.second_image != blank -%}
                    <div class="swiper-image-container half-width">
                      {% if section.settings.slide_height == 'adapt' %}
                        {{ block.settings.second_image | image_url: width: 1500 | image_tag:
                          loading: 'lazy',
                          class: 'swiper-image',
                          sizes: '50vw',
                          alt: block.settings.second_image.alt | default: block.settings.second_heading | escape
                        }}
                      {% else %}
                        {% assign img_url = block.settings.second_image | image_url: width: 1500 %}
                        <img
                          src="{{ img_url }}"
                          loading="lazy"
                          class="swiper-image"
                          alt="{{ block.settings.second_image.alt | default: block.settings.second_heading | escape }}"
                          width="{{ block.settings.second_image.width }}"
                          height="{{ block.settings.second_image.height }}"
                        >
                      {% endif %}
                      
                      {%- if section.settings.image_overlay_opacity > 0 -%}
                         <div class="image-overlay"></div>
                      {%- endif -%}
                      
                      {% if block.settings.second_heading != blank or block.settings.second_text != blank or block.settings.second_button_label != blank %}
                        <div class="swiper-content-container">
                          <div class="swiper-content-box">
                            {% if block.settings.second_heading != blank %}
                              <h2 class="swiper-heading">{{ block.settings.second_heading }}</h2>
                            {% endif %}
                            
                              {% if block.settings.second_title != blank %}
                              <div class="swiper-title">{{ block.settings.second_title }}</div>
                            {% endif %}

                            {% if block.settings.second_text != blank %}
                              <div class="swiper-subtitle">{{ block.settings.second_text }}</div>
                            {% endif %}
                            
                            {% if block.settings.second_button_label != blank %}
                              <div class="button-container">
                                <a href="{{ block.settings.second_button_link | default: '#' }}" class="swiper-button-link">
                                  {{ block.settings.second_button_label }}
                                </a>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  {%- endif -%}
                {%- else -%}
                  <div class="swiper-image-container {% if block.settings.second_image != blank %}half-width{% endif %}">
                    {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg swiper-image' }}
                
                    {% if block.settings.heading != blank or block.settings.text != blank or block.settings.button_label != blank %}
                      <div class="swiper-content-container">
                        <div class="swiper-content-box">
                          {% if block.settings.heading != blank %}
                            <h2 class="swiper-heading">{{ block.settings.heading }}</h2>
                          {% endif %}
                          
                           {% if block.settings.title != blank %}
                            <div class="swiper-title">{{ block.settings.title }}</div>
                          {% endif %}

                          {% if block.settings.text != blank %}
                            <div class="swiper-subtitle">{{ block.settings.text }}</div>
                          {% endif %}
                          
                          {% if block.settings.button_label != blank %}
                            <div class="button-container">
                              <a href="{{ block.settings.button_link | default: '#' }}" class="swiper-button-link">
                                {{ block.settings.button_label }}
                              </a>
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    {% endif %}
                  </div>
                  
                  {%- if block.settings.second_image != blank -%}
                    <div class="swiper-image-container half-width">
                      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg swiper-image' }}
                      
                      {%- if section.settings.image_overlay_opacity > 0 -%}
                        <div class="image-overlay"></div>
                      {%- endif -%}
                      
                      {% if block.settings.second_heading != blank or block.settings.second_text != blank or block.settings.second_button_label != blank %}
                        <div class="swiper-content-container">
                          <div class="swiper-content-box">
                            {% if block.settings.second_heading != blank %}
                              <h2 class="swiper-heading">{{ block.settings.second_heading }}</h2>
                            {% endif %}
                            
                             {% if block.settings.second_title != blank %}
                              <div class="swiper-title">{{ block.settings.second_title }}</div>
                            {% endif %}

                            {% if block.settings.second_text != blank %}
                              <div class="swiper-subtitle">{{ block.settings.second_text }}</div>
                            {% endif %}
                            
                            {% if block.settings.second_button_label != blank %}
                              <div class="button-container">
                                <a href="{{ block.settings.second_button_link | default: '#' }}" class="swiper-button-link">
                                  {{ block.settings.second_button_label }}
                                </a>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      {% endif %}
                    </div>
                  {%- endif -%}
                {%- endif -%}
              </div>
          {% endcase %}
        {%- endfor -%}
      </div>
      {% if section.settings.show_navigation %}
        <div class="swiper-navigation-container">
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      {% endif %}
    </div>
    
    {% if section.settings.show_pagination %}
      <div class="swiper-pagination"></div>
    {% endif %}
  </div>
</div>

<link rel="stylesheet" href="{{ 'swiper-bundle.min.css' | asset_url }}">
<script src="{{ 'swiper-bundle.min.js' | asset_url }}" defer="defer"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const swiperElement = document.getElementById('Swiper-{{ section.id }}');
    
    if (swiperElement) {
      // Count the number of slides
      const slideCount = swiperElement.querySelectorAll('.swiper-slide').length;
      
      // Determine appropriate slidesPerView based on available slides
      const maxSlidesPerView = Math.min(
        slideCount,
        {{ section.settings.slides_per_view | default: 1 }}
      );
      
      const swiper = new Swiper('#Swiper-{{ section.id }}', {
        // Enable loop only if there are enough slides
        loop: {% if section.settings.enable_loop %}slideCount > maxSlidesPerView{% else %}false{% endif %},
        
        autoplay: {% if section.settings.enable_autoplay %}
          {
            delay: {{ section.settings.autoplay_delay | default: 3000 }},
            disableOnInteraction: false
          }
        {% else %}
          false
        {% endif %},
        
        navigation: {
          nextEl: '#Swiper-{{ section.id }} .swiper-button-next',
          prevEl: '#Swiper-{{ section.id }} .swiper-button-prev',
        },
        
        pagination: {
          el: '#Swiper-{{ section.id }} .swiper-pagination',
          clickable: true,
        },
        
        // Responsive breakpoints
        breakpoints: {
          320: {
            slidesPerView: Math.min(slideCount, {{ section.settings.slides_per_view_mobile | default: 1 }}),
            spaceBetween: 10
          },
          768: {
            slidesPerView: Math.min(slideCount, {{ section.settings.slides_per_view_tablet | default: 2 }}),
            spaceBetween: 20
          },
          1024: {
            slidesPerView: Math.min(slideCount, maxSlidesPerView),
            spaceBetween: {{ section.settings.space_between | default: 30 }}
          }
        },
        
        // Additional options for better performance
        preloadImages: false,
        lazy: {
          loadPrevNext: true,
        },
        watchSlidesProgress: true,
        
        // Prevent errors when slides are dynamically added/removed
        observer: true,
        observeParents: true,
        
        // Effect
        effect: '{{ section.settings.transition_effect }}',
        
        // Speed
        speed: {{ section.settings.transition_speed }},
        
        // Update on window resize
        resizeObserver: true
      });
      
      // Fix for image sizing after swiper initialization
      setTimeout(function() {
        swiper.update();
      }, 100);
      
      // Update swiper when images are loaded
      const images = swiperElement.querySelectorAll('.swiper-image');
      images.forEach(function(img) {
        img.onload = function() {
          swiper.update();
        };
      });
      
      // Update swiper on window resize
      window.addEventListener('resize', function() {
        setTimeout(function() {
          swiper.update();
        }, 100);
      });
      
      console.log('Swiper initialized for #Swiper-{{ section.id }}');
    } else {
      console.error('Swiper element #Swiper-{{ section.id }} not found');
    }
  });
</script>

{% schema %}
{
  "name": "Image Swiper",
  "settings": [
    {
      "type": "header",
      "content": "Slide Layout"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#2a2a2a"
    },
    {
      "type": "select",
      "id": "slide_height",
      "label": "Slide height",
      "options": [
        {
          "value": "adapt",
          "label": "Adapt to image"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "medium"
    },
    {
      "type": "select",
      "id": "image_fit",
      "label": "Image fit",
      "options": [
        {
          "value": "cover",
          "label": "Cover (may crop)"
        },
        {
          "value": "contain",
          "label": "Contain (no cropping)"
        }
      ],
      "default": "cover",
      "info": "Cover fills the entire space but may crop. Contain shows the whole image but may leave empty space."
    },
    
    {
      "type": "range",
      "id": "image_opacity",
      "min": 10,
      "max": 100,
      "step": 5,
      "unit": "%",
      "label": "Image opacity",
      "default": 85
    },
  
    {
      "type": "header",
      "content": "Content Appearance"
    },
    {
      "type": "select",
      "id": "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_left"
    },
    {
      "type": "color",
      "id": "content_background",
      "label": "Content background color",
      "default": "#000000",
    },
    {
      "type": "range",
      "id": "content_opacity",
      "min": 0.0,
      "max": 1.0,
      "step": 0.1,
      "label": "Content background opacity",
      "default": 0
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "heading_size",
      "min": 16,
      "max": 60,
      "step": 2,
      "unit": "px",
      "label": "Heading size",
      "default": 52
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Sub-Title color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "title_size",
      "min": 1,
      "max": 35,
      "step": 1,
      "unit": "px",
      "label": "Sub-Title size",
      "default": 29
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#FFFFFF"
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 12,
      "max": 30,
      "step": 1,
      "unit": "px",
      "label": "Text size",
      "default": 17
    },
    {
      "type": "select",
      "id": "button_position",
      "label": "Button alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "left"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Button background",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Slider Behavior"
    },
    {
      "type": "checkbox",
      "id": "enable_loop",
      "label": "Enable Loop",
      "default": true,
      "info": "Requires more slides than slides per view"
    },
    {
      "type": "checkbox",
      "id": "enable_autoplay",
      "label": "Enable Autoplay",
      "default": true
    },
    {
      "type": "range",
      "id": "autoplay_delay",
      "min": 2000,
      "max": 8000,
      "step": 1000,
      "unit": "ms",
      "label": "Autoplay Delay",
      "default": 3000
    },
    {
      "type": "select",
      "id": "transition_effect",
      "label": "Transition effect",
      "options": [
        {
          "value": "slide",
          "label": "Slide"
        },
        {
          "value": "fade",
          "label": "Fade"
        },
        {
          "value": "coverflow",
          "label": "Coverflow"
        },
         {
          "value": "riseup/down",
          "label": "Coverflow"
        }
      ],
      "default": "slide"
    },
    {
      "type": "range",
      "id": "transition_speed",
      "min": 300,
      "max": 1500,
      "step": 100,
      "unit": "ms",
      "label": "Transition Speed",
      "default": 500
    },
    {
      "type": "header",
      "content": "Navigation"
    },
    {
      "type": "checkbox",
      "id": "show_navigation",
      "label": "Show Navigation Arrows",
      "default": true
    },
    {
      "type": "color",
      "id": "navigation_color",
      "label": "Navigation Arrow Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "navigation_background",
      "label": "Navigation Background",
      "default": "#FFFFFF"
    },
    {
      "type": "checkbox",
      "id": "show_pagination",
      "label": "Show Pagination Dots",
      "default": true
    },
    {
      "type": "color",
      "id": "pagination_color",
      "label": "Pagination Dot Color",
      "default": "#000000"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "slides_per_view",
      "min": 1,
      "max": 4,
      "step": 1,
      "label": "Slides Per View (Desktop)",
      "default": 1
    },
    {
      "type": "range",
      "id": "slides_per_view_tablet",
      "min": 1,
      "max": 3,
      "step": 1,
      "label": "Slides Per View (Tablet)",
      "default": 1
    },
    {
      "type": "range",
      "id": "slides_per_view_mobile",
      "min": 1,
      "max": 3,
      "step": 1,
      "label": "Slides Per View (Mobile)",
      "default": 1
    },
    {
      "type": "range",
      "id": "space_between",
      "min": 10,
      "max": 50,
      "step": 5,
      "unit": "px",
      "label": "Space Between Slides",
      "default": 20
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "header",
          "content": "First Image"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Title",
          "default": "Image Heading"
        },
         {
          "type": "text",
          "id": "title",
          "label": "Sub-Title",
          "default": "Image Sub-title"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Description",
          "default": "<p>Add descriptive text about your store.</p>"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button label",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        },
        {
          "type": "header",
          "content": "Second Image (Optional)"
        },
        {
          "type": "image_picker",
          "id": "second_image",
          "label": "Image",
          "info": "When provided, images will display in 50/50 layout"
        },
        {
          "type": "text",
          "id": "second_heading",
          "label": "Title"
        },
        {
          "type": "text",
          "id": "second_title",
          "label": "Sub-Title"
        },
        {
          "type": "richtext",
          "id": "second_text",
          "label": "Description"
        },
        {
          "type": "text",
          "id": "second_button_label",
          "label": "Button label"
        },
        {
          "type": "url",
          "id": "second_button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Swiper",
      "blocks": [
        {
          "type": "slide"
        },
        {
          "type": "slide"
        },
        {
          "type": "slide"
        }
      ]
    }
  ]
}
{% endschema %}
2

Hi @amisha-29 ,

Is it possible for you to share the URL in a private message?

It would help me fix the issues.

Thanks

3

Sorry I cannot that’s why I have given the code here

4

It sounds like the issue isn’t the negative value itself, but the parent container’s CSS.

In the Dawn theme (and most Shopify sections), the slider wrapper usually has overflow: hidden;. Because of that, when you move the navigation buttons outside the image using negative positioning (like left: -20px or right: -20px), they get clipped and won’t be visible.

Try checking the parent containers of your Swiper element (for example .swiper, .swiper-container, or the section wrapper). If you see:

overflow: hidden;

Change it to:

overflow: visible;

Also make sure:

  • The navigation buttons are positioned with position: absolute;

  • The parent wrapper has position: relative;

  • The buttons have a higher z-index than the image

If you can’t change overflow because it breaks the layout, another option is to move the navigation buttons outside of the Swiper container in the HTML and then target them using Swipe’s navigation configuration.
Most likely the overflow: hidden; is what’s preventing the buttons from appearing outside the image.