Create auto slide carousel using js in shopfy
Create auto slide carousel using js
1. Create a section
Create a section in your shopify named 'custom-slider.liquid'
2. Copy and paste the code
Copy and paste the code in 'custom-slider.liquid'
{% liquid
assign collections = section.settings.collection_list_items
%}
<!-- Carousel Wrapper -->
<div class="collection-carousel-wrapper max-w-[1400px]">
<div class="collection-carousel" id="collectionCarousel">
{% for collection in collections %}
<div class="carousel-item">
<a href="{{ collection.url }}">
<img src="{{ collection.image | img_url: 'master' }}" alt="{{ collection.title }}" height="" width="">
<h3>{{ collection.title }}</h3>
</a>
</div>
{% endfor %}
</div>
</div>
<style>
.collection-carousel-wrapper {
overflow: hidden;
width: 100%;
position: relative;
margin: 30px auto;
}
.collection-carousel {
display: flex;
transition: transform 0.5s ease-in-out;
will-change: transform;
}
.carousel-item {
flex: 0 0 100%;
text-align: center;
justify-content: center;
padding: 10px;
box-sizing: border-box;
}
.carousel-item img {
max-width: 100%;
height: 400px;
object-fit: cover;
display: block;
margin: 0 auto 10px;
}
@media (min-width: 768px) {
.carousel-item {
flex: 0 0 50%;
}
}
@media (min-width: 1024px) {
.carousel-item {
flex: 0 0 33.3333%;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const carousel = document.getElementById('collectionCarousel');
const items = carousel.querySelectorAll('.carousel-item');
const totalItems = items.length;
let itemsPerView = 1;
function updateItemsPerView() {
if (window.innerWidth >= 1024) {
itemsPerView = 3;
} else if (window.innerWidth >= 768) {
itemsPerView = 2;
} else {
itemsPerView = 1;
}
}
updateItemsPerView();
// Clone first few items to the end to enable infinite scroll
for (let i = 0; i < itemsPerView; i++) {
const clone = items[i].cloneNode(true);
carousel.appendChild(clone);
}
let currentIndex = 0;
let itemWidth = carousel.querySelector('.carousel-item').offsetWidth;
function slideNextItem() {
itemWidth = carousel.querySelector('.carousel-item').offsetWidth;
currentIndex++;
carousel.style.transition = 'transform 0.5s ease-in-out';
carousel.style.transform = `translateX(-${currentIndex * itemWidth}px)`;
// Reset to start if at clone
if (currentIndex === totalItems) {
setTimeout(() => {
carousel.style.transition = 'none';
carousel.style.transform = `translateX(0px)`;
currentIndex = 0;
}, 500);
}
}
let interval = setInterval(slideNextItem, 3000); // Auto-scroll every 3s
// Responsive: Reset on resize
window.addEventListener('resize', () => {
updateItemsPerView();
itemWidth = carousel.querySelector('.carousel-item').offsetWidth;
carousel.style.transition = 'none';
carousel.style.transform = `translateX(0px)`;
currentIndex = 0;
});
});
</script>
{% schema %}
{
"name": "Collection Carousel",
"settings": [
{
"type": "collection_list",
"id": "collection_list_items",
"label": "Collection_items"
},
{
"type": "text",
"id": "scroll_speed",
"label": "Scroll Speed",
"default": "1500"
}
],
"presets": [
{
"name": "Collection Carousel"
}
]
}
{% endschema %}