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 alot 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.
{%- 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 %}