document.addEventListener('DOMContentLoaded', function () const swiper = new Swiper('.product-swiper', // Responsive breakpoints slidesPerView: 1, spaceBetween: 20, loop: true, autoplay: delay: 4000, disableOnInteraction: false, , pagination: el: '.swiper-pagination', clickable: true, dynamicBullets: true, , navigation: nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', , breakpoints: // when window width is >= 640px 640: slidesPerView: 2, spaceBetween: 20, , // >= 768px 768: slidesPerView: 3, spaceBetween: 25, , // >= 1024px 1024: slidesPerView: 4, spaceBetween: 30, , , // Optional: smooth effects effect: 'slide', speed: 800, ); );
| Breakpoint | Slides shown | Use case | |------------|--------------|----------| | < 640px | 1 card | Mobile phones | | 640px - 767px | 2 cards | Small tablets | | 768px - 1023px | 3 cards | iPads, landscape phones | | ≥ 1024px | 4 cards | Desktops, laptops | responsive product card slider codepen
On desktop, a card might be 300px wide with a large image. On mobile, the same card might shrink to 160px width, forcing the font size to adjust using clamp() or vw units. document
document.addEventListener('DOMContentLoaded', function () const swiper = new Swiper('.product-swiper', // Responsive breakpoints slidesPerView: 1, spaceBetween: 20, loop: true, autoplay: delay: 4000, disableOnInteraction: false, , pagination: el: '.swiper-pagination', clickable: true, dynamicBullets: true, , navigation: nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', , breakpoints: // when window width is >= 640px 640: slidesPerView: 2, spaceBetween: 20, , // >= 768px 768: slidesPerView: 3, spaceBetween: 25, , // >= 1024px 1024: slidesPerView: 4, spaceBetween: 30, , , // Optional: smooth effects effect: 'slide', speed: 800, ); );
| Breakpoint | Slides shown | Use case | |------------|--------------|----------| | < 640px | 1 card | Mobile phones | | 640px - 767px | 2 cards | Small tablets | | 768px - 1023px | 3 cards | iPads, landscape phones | | ≥ 1024px | 4 cards | Desktops, laptops |
On desktop, a card might be 300px wide with a large image. On mobile, the same card might shrink to 160px width, forcing the font size to adjust using clamp() or vw units.