Shopify Liquid
3 info sliders with images

Drop this Shopify Liquid snippet into your theme to add the 3 info sliders with images block. Copy the code below, paste it into your theme files, save and you're done.
255 lines · 9.2 KB
Shopify Liquid
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Responsive Slider</title>
8    <style>
9        #v3-slider-container {
10            overflow: hidden;
11            position: relative;
12            padding: 20px 5px;
13            max-width: 1500px;
14            margin-right: auto;
15            margin-left: auto;
16        }
17
18        @media only screen and (min-width: 768px) {
19            #v3-slider-container {
20                width: max-content;
21            }
22        }
23
24        #v3-slider {
25            display: flex;
26            transition: transform 0.5s ease-in-out;
27            padding: 5px;
28        }
29
30        .v3-slider-card {
31            flex: 0 0 80%;
32            max-width: 300px;
33            height: max-content;
34            display: flex;
35            flex-direction: column;
36            background-color: #fff;
37            border: 1px solid #e0e0e0;
38            border-radius: 10px;
39            box-sizing: border-box;
40            gap: 10px;
41            transition: transform 0.3s ease;
42            justify-content: space-around;
43            margin-right: 10px;
44        }
45
46        #v3-pagination {
47            display: flex;
48            justify-content: center;
49            margin-top: 10px;
50            display: none;
51        }
52
53        .v3-pagination-dot {
54            width: 18px;
55            height: 6px;
56            background-color: #0d437d29;
57            cursor: pointer;
58        }
59
60        .v3-pagination-dot.active {
61            background-color: #f05454;
62            width: 22px;
63            border-radius: 5px;
64        }
65
66        .content-container {
67            padding: 10px;
68        }
69
70        .feature-title {
71            margin: 0px;
72            font-weight: 700;
73            color: #203E5C;
74        }
75
76        .feature-image {
77            border-top-right-radius: 10px;
78            border-top-left-radius: 10px;
79        }
80
81        .feature-description {
82            font-size: 15px;
83            font-weight: 500;
84        }
85    </style>
86</head>
87
88<body>
89    <div id="v3-slider-container">
90        <div id="v3-slider">
91            <div class="v3-slider-card">
92
93                <img src="//www.moonpod.co/cdn/shop/files/1_16.jpg?v=1720630615" class="feature-image">
94                <div class="content-container">
95                    <h3 class="feature-title"><span>Relaxing Comfort</span></h3>
96                    <p class="feature-description"><span>Thousands of high density beads conform to every inch of your body, mimicking floatation therapy, a known treatment for reducing stress and anxiety.</span></p>
97                </div>
98
99            </div>
100            <div class="v3-slider-card">
101
102                <img src="//www.moonpod.co/cdn/shop/files/2_13.jpg?v=1720630634" class="feature-image">
103                <div class="content-container">
104                    <h3 class="feature-title"><span>Upgraded Leisure</span></h3>
105                    <p class="feature-description"><span>People love to Moon Pod together. Our beads do the work, so it's easier to with loved ones. Reading, napping and gaming are all better on a Moon Pod.</span></p>
106                </div>
107
108
109            </div>
110            <div class="v3-slider-card">
111
112                <img src="//www.moonpod.co/cdn/shop/files/3_14.jpg?v=1720630634" class="feature-image">
113                <div class="content-container">
114                    <h3 class="feature-title"><span class="metafield-single_line_text_field">Elevated Relaxation</span></h3>
115                    <p class="feature-description"><span class="metafield-multi_line_text_field">Unparalleled support meets adaptive flexibility, relieving tension and joint pain while you relax. the perfect amount of structure for all shapes and sizes.</span></p>
116                </div>
117
118
119            </div>
120        </div>
121        <div id="v3-pagination"></div>
122    </div>
123
124    <script>
125        let sliderInitialized = false;
126
127        class ResponsiveSlider {
128            constructor(containerId, sliderId, paginationId) {
129                this.container = document.getElementById(containerId);
130                this.slider = document.getElementById(sliderId);
131                this.pagination = document.getElementById(paginationId);
132                this.cards = Array.from(this.slider.children);
133                this.cardWidth = this.cards[0].offsetWidth + 10; // Includes margin
134                this.totalWidth = this.cardWidth * this.cards.length - 10; // Adjust total width
135                this.containerWidth = this.slider.parentElement.offsetWidth;
136                this.currentIndex = 0;
137                this.isDragging = false;
138                this.startX = 0;
139                this.currentTranslate = 0;
140                this.prevTranslate = 0;
141                this.animationID = null;
142
143                this.init();
144            }
145
146            init() {
147                this.createPagination();
148                this.addEventListeners();
149                this.startAutoplay();
150            }
151
152            updatePagination() {
153                this.pagination.querySelectorAll('.v3-pagination-dot').forEach((dot, index) => {
154                    dot.classList.toggle('active', index === this.currentIndex);
155                });
156            }
157
158            goToSlide(index) {
159                this.currentIndex = index;
160                const maxOffset = Math.max(this.totalWidth - this.containerWidth, 0); // Prevent gaps
161                const offset = Math.min(this.currentIndex * this.cardWidth, maxOffset);
162                this.slider.style.transition = 'transform 0.5s ease';
163                this.slider.style.transform = `translateX(-${offset}px)`;
164                this.currentTranslate = -offset;
165                this.prevTranslate = this.currentTranslate;
166                this.updatePagination();
167            }
168
169            createPagination() {
170                const totalSlides = this.cards.length;
171                this.pagination.innerHTML = '';
172                for (let i = 0; i < totalSlides; i++) {
173                    const dot = document.createElement('div');
174                    dot.classList.add('v3-pagination-dot');
175                    dot.innerHTML = '&#8203;'; // Add zero-width space to prevent being treated as empty
176                    if (i === 0) dot.classList.add('active');
177                    dot.addEventListener('click', () => this.goToSlide(i));
178                    this.pagination.appendChild(dot);
179                }
180            }
181
182            autoplay() {
183                this.currentIndex = (this.currentIndex + 1) % this.cards.length;
184                this.goToSlide(this.currentIndex);
185            }
186
187            startAutoplay() {
188                setInterval(() => this.autoplay(), 3000);
189            }
190
191            startDrag(event) {
192                this.isDragging = true;
193                this.startX = this.getPositionX(event);
194                this.slider.style.transition = 'none';
195                cancelAnimationFrame(this.animationID);
196            }
197
198            endDrag() {
199                this.isDragging = false;
200                const movedBy = this.currentTranslate - this.prevTranslate;
201                if (movedBy < -50 && this.currentIndex < this.cards.length - 1) {
202                    this.currentIndex++;
203                }
204                if (movedBy > 50 && this.currentIndex > 0) {
205                    this.currentIndex--;
206                }
207                this.goToSlide(this.currentIndex);
208            }
209
210            drag(event) {
211                if (this.isDragging) {
212                    const currentPosition = this.getPositionX(event);
213                    this.currentTranslate = this.prevTranslate + currentPosition - this.startX;
214                    this.slider.style.transform = `translateX(${this.currentTranslate}px)`;
215                }
216            }
217
218            getPositionX(event) {
219                return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
220            }
221
222            addEventListeners() {
223                this.slider.addEventListener('mousedown', (e) => this.startDrag(e));
224                this.slider.addEventListener('touchstart', (e) => this.startDrag(e));
225                this.slider.addEventListener('mouseup', () => this.endDrag());
226                this.slider.addEventListener('touchend', () => this.endDrag());
227                this.slider.addEventListener('mousemove', (e) => this.drag(e));
228                this.slider.addEventListener('touchmove', (e) => this.drag(e));
229                window.addEventListener('resize', () => {
230                    this.slider.style.transform = 'translateX(0)';
231                    this.currentIndex = 0;
232                    this.updatePagination();
233                });
234            }
235        }
236
237        function initializeSlider() {
238            if (!sliderInitialized && window.innerWidth < 768) {
239                new ResponsiveSlider('v3-slider-container', 'v3-slider', 'v3-pagination');
240                sliderInitialized = true;
241            } else if (sliderInitialized && window.innerWidth >= 768) {
242                sliderInitialized = false;
243                document.getElementById('v3-slider').style.transform = 'translateX(0)';
244                document.getElementById('v3-pagination').innerHTML = '';
245            }
246        }
247
248        initializeSlider();
249
250        window.addEventListener('resize', initializeSlider);
251    </script>
252
253</body>
254
255</html>
Related snippets

/ shopify liquid
3 info sliders with images

Related snippets

Tabs with images

2000+ people voted

Announcement Bar

Best Seller
