<style>
/* Outer section spans 100% width */
#images-carousel-{{ section.id }} {
width: 100%;
}
/* The container wraps both heading and slider */
#images-carousel-{{ section.id }} .images-carousel-container {
margin: 0 auto;
}
#images-carousel-{{ section.id }} .section-heading {
text-align: {{ section.settings.heading_alignment }};
margin-bottom: 20px;
font-size: {% if section.settings.heading_size == 'small' %}24px{% elsif section.settings.heading_size == 'medium' %}32px{% elsif section.settings.heading_size == 'large' %}40px{% endif %};
}
#images-carousel-{{ section.id }} .images-carousel-wrapper {
position: relative;
overflow: hidden;
}
#images-carousel-{{ section.id }} .images-carousel-slider {
overflow: hidden;
position: relative;
width: 100%;
}
#images-carousel-{{ section.id }} .slider-track {
display: flex;
gap: 15px;
transition: transform 0.5s ease-in-out;
will-change: transform;
}
/* Desktop slide width calculated based on visible_images setting */
#images-carousel-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_images | minus: 1 }} * 15px)) / {{ section.settings.visible_images }});
}
/* Mobile override: use visible_mobile setting */
@media (max-width: 767px) {
#images-carousel-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_mobile | minus: 1 }} * 15px)) / {{ section.settings.visible_mobile }});
}
}
#images-carousel-{{ section.id }} .slide img {
width: 100%;
object-fit: cover;
{% case section.settings.image_design %}
{% when "square" %}
aspect-ratio: 1 / 1;
{% when "circle" %}
aspect-ratio: 1 / 1;
border-radius: 50%;
{% when "portrait" %}
aspect-ratio: 2 / 3;
{% else %}
/* adapt */
height: auto;
{% endcase %}
{% if section.settings.image_shadow %}
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
{% endif %}
}
/* Arrow buttons */
#images-carousel-{{ section.id }} .arrow {
background: {{ section.settings.arrow_bg_color }};
color: white;
border: none;
cursor: pointer;
font-size: 24px;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
transition: background 0.3s ease;
border-radius: {% if section.settings.arrow_shape == "circle" %}50%{% else %}0{% endif %};
display: flex;
align-items: center;
justify-content: center;
padding: 0px 0px;
width: 50px;
height: 50px;
}
#images-carousel-{{ section.id }} .arrow:hover {
opacity: 0.8;
}
#images-carousel-{{ section.id }} .left-arrow {
left: 10px;
}
#images-carousel-{{ section.id }} .right-arrow {
right: 10px;
}
</style>
{%- comment -%}
The outer container always spans 100% width. Inside, we wrap both the heading and slider in a common container
whose width is controlled by the full_width setting.
{%- endcomment -%}
<div id="images-carousel-{{ section.id }}" class="page-width images-carousel-section" style="background-color: {{ section.settings.section_bg_color }}; padding-top: {{ section.settings.section_padding_top }}px; padding-bottom: {{ section.settings.section_padding_bottom }}px;">
<div class="images-carousel-container" style="width: {% if section.settings.full_width %}100%{% else %}80%{% endif %}; margin: 0 auto;">
{% if section.settings.section_title != blank %}
<h2 class="section-heading">{{ section.settings.section_title }}</h2>
{% endif %}
<div class="images-carousel-wrapper">
{% if section.settings.show_arrows %}
<button class="arrow left-arrow">❮</button>
{% endif %}
<div class="images-carousel-slider">
<div class="slider-track">
{% for block in section.blocks %}
<div class="slide">
{% if block.settings.image != blank %}
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}">
<img
class="carousel-image"
src="{{ block.settings.image | img_url: section.settings.image_size }}"
alt="{{ block.settings.image.alt | escape }}"
/>
</a>
{% else %}
<img
class="carousel-image"
src="{{ block.settings.image | img_url: section.settings.image_size }}"
alt="{{ block.settings.image.alt | escape }}"
/>
{% endif %}
{% endif %}
</div>
{% endfor %}
{%- comment -%}
Clone the first N slides (where N = visible_images) for seamless looping
{%- endcomment -%}
{% for block in section.blocks limit: section.settings.visible_images %}
<div class="slide clone">
{% if block.settings.image != blank %}
<img class="carousel-image" src="{{ block.settings.image | img_url: section.settings.image_size }}" alt="Carousel Image">
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% if section.settings.show_arrows %}
<button class="arrow right-arrow">❯</button>
{% endif %}
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
var container = document.getElementById("images-carousel-{{ section.id }}");
if (!container) return;
var sliderTrack = container.querySelector(".slider-track");
var slides = container.querySelectorAll(".slide");
if (slides.length === 0) return;
// Define gap (must match the CSS gap)
var gap = 15;
// Get slide width (including gap)
var slideWidth = slides[0].offsetWidth + gap;
// Use JSON filter to output proper JS values
var autoplay = {{ section.settings.autoplay | json }};
var autoplaySpeed = {{ section.settings.autoplay_speed | json }};
var index = 0;
var totalSlides = slides.length;
var clonedSlides = container.querySelectorAll(".clone").length;
function updateSlidePosition() {
sliderTrack.style.transform = "translateX(-" + (index * slideWidth) + "px)";
}
function slideNext() {
index++;
sliderTrack.style.transition = "transform 0.5s ease-in-out";
updateSlidePosition();
}
function slidePrev() {
index--;
sliderTrack.style.transition = "transform 0.5s ease-in-out";
updateSlidePosition();
}
sliderTrack.addEventListener("transitionend", function () {
// If we've reached the cloned slides at the end, reset to the first real slide
if (index >= totalSlides - clonedSlides) {
sliderTrack.style.transition = "none";
index = 0;
updateSlidePosition();
void sliderTrack.offsetWidth;
sliderTrack.style.transition = "transform 0.5s ease-in-out";
}
// If we've gone before the first slide, reset to the last real slide
if (index < 0) {
sliderTrack.style.transition = "none";
index = totalSlides - clonedSlides - 1;
updateSlidePosition();
void sliderTrack.offsetWidth;
sliderTrack.style.transition = "transform 0.5s ease-in-out";
}
});
var rightArrow = container.querySelector(".right-arrow");
var leftArrow = container.querySelector(".left-arrow");
if (rightArrow) {
rightArrow.addEventListener("click", slideNext);
}
if (leftArrow) {
leftArrow.addEventListener("click", slidePrev);
}
if (autoplay) {
setInterval(slideNext, autoplaySpeed);
}
window.addEventListener("resize", function () {
slideWidth = slides[0].offsetWidth + gap;
sliderTrack.style.transition = "none";
updateSlidePosition();
});
});
</script>
{% schema %}
{
"name": "Images Slider",
"settings": [
{
"type": "text",
"id": "section_title",
"label": "Section Title",
"default": "Image Carousel"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Section Title Alignment",
"options": [
{ "value": "left", "label": "Left" },
{ "value": "center", "label": "Center" },
{ "value": "right", "label": "Right" }
],
"default": "center"
},
{
"type": "select",
"id": "heading_size",
"label": "Section Title Size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "medium"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full Width Section",
"default": false
},
{
"type": "color",
"id": "section_bg_color",
"label": "Section Background Color",
"default": "#ffffff"
},
{
"type": "range",
"id": "section_padding_top",
"label": "Section Top Padding (px)",
"min": 0,
"max": 200,
"step": 5,
"default": 20
},
{
"type": "range",
"id": "section_padding_bottom",
"label": "Section Bottom Padding (px)",
"min": 0,
"max": 200,
"step": 5,
"default": 20
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Enable Auto Slide",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"label": "Auto Slide Speed (ms)",
"min": 1000,
"max": 9000,
"step": 500,
"default": 3000
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show Arrows",
"default": true
},
{
"type": "select",
"id": "arrow_shape",
"label": "Arrow Shape",
"options": [
{ "value": "circle", "label": "Circle" },
{ "value": "square", "label": "Square" }
],
"default": "circle"
},
{
"type": "color",
"id": "arrow_bg_color",
"label": "Arrow Background Color",
"default": "#000000"
},
{
"type": "range",
"id": "visible_images",
"label": "Number of Visible Images (Desktop)",
"min": 1,
"max": 6,
"step": 1,
"default": 3
},
{
"type": "range",
"id": "visible_mobile",
"label": "Number of Visible Images (Mobile)",
"min": 1,
"max": 3,
"step": 1,
"default": 1
},
{
"type": "select",
"id": "image_size",
"label": "Image Size",
"options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
],
"default": "medium"
},
{
"type": "select",
"id": "image_design",
"label": "Image Design",
"options": [
{ "value": "square", "label": "Square" },
{ "value": "circle", "label": "Circle" },
{ "value": "adapt", "label": "Adapt" },
{ "value": "portrait", "label": "Portrait" }
],
"default": "adapt"
},
{
"type": "checkbox",
"id": "image_shadow",
"label": "Enable Image Shadow",
"default": false
}
],
"blocks": [
{
"type": "carousel_image",
"name": "Carousel Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Image Link (product, collection, page, or external URL)"
}
]
}
],
"max_blocks": 10,
"presets": [
{
"name": "Images Slider"
}
]
}
{% endschema %}
