Skip to content

Commit c3130bd

Browse files
author
TechStack Global
committed
feat: enhance feature swiper deck with autoplay, loop, pagination and rich gradients
1 parent 1146383 commit c3130bd

File tree

1 file changed

+100
-38
lines changed

1 file changed

+100
-38
lines changed

‎index.html‎

Lines changed: 100 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
107107
Just clear guidance on the tech that powers modern work.</p>
108108

109109
</div>
110-
<!-- Feature Review Animated Cards -->
110+
<!-- Feature Review Animated Cards -->
111111
<div class="hero-visual" style="position: relative;">
112112
<!-- Swiper integration -->
113113
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
@@ -119,29 +119,33 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
119119
display: flex;
120120
align-items: center;
121121
}
122+
122123
.swiper-card-effect {
123124
width: 100%;
124125
max-width: 340px;
125126
height: 480px;
126127
padding: 30px 0;
127128
overflow: visible;
128129
}
130+
129131
.swiper-card-effect .swiper-slide {
130132
display: flex;
131133
flex-direction: column;
132134
border-radius: var(--border-radius, 12px);
133-
background: rgba(15, 23, 42, 0.85);
135+
background: linear-gradient(155deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.85));
134136
backdrop-filter: blur(16px);
135-
border: 1px solid var(--border-glass, rgba(255,255,255,0.1));
137+
border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1));
136138
border-top: 4px solid var(--accent, #38bdf8);
137139
box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.5);
138140
padding: 2rem;
139141
cursor: grab;
140142
box-sizing: border-box;
141143
}
144+
142145
.swiper-card-effect .swiper-slide:active {
143146
cursor: grabbing;
144147
}
148+
145149
.swiper-card-effect .swiper-slide img {
146150
width: 100%;
147151
height: 200px;
@@ -151,31 +155,34 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
151155
padding: 0.5rem;
152156
margin-bottom: 1rem;
153157
pointer-events: none;
154-
box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
158+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
155159
}
160+
156161
.swiper-card-effect .swiper-slide h3 {
157162
font-size: 1.4rem;
158163
margin-bottom: 0.5rem;
159164
line-height: 1.3;
160165
color: #fff;
161166
}
167+
162168
.swiper-card-effect .swiper-slide p {
163169
color: var(--text-secondary, #94a3b8);
164170
font-size: 0.95rem;
165171
line-height: 1.5;
166172
margin-bottom: auto;
167173
}
168-
174+
169175
/* Custom Navigation Styles floating outside the slides */
170-
.swiper-btn-next, .swiper-btn-prev {
176+
.swiper-btn-next,
177+
.swiper-btn-prev {
171178
position: absolute;
172179
top: 50%;
173180
transform: translateY(-50%);
174181
width: 48px;
175182
height: 48px;
176183
background: rgba(15, 23, 42, 0.8);
177184
backdrop-filter: blur(10px);
178-
border: 1px solid var(--border-glass, rgba(255,255,255,0.1));
185+
border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.1));
179186
border-radius: 50%;
180187
color: #fff;
181188
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
@@ -186,110 +193,165 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
186193
cursor: pointer;
187194
z-index: 10;
188195
}
189-
.swiper-btn-prev { left: -15px; }
190-
.swiper-btn-next { right: -15px; }
191196

192-
.swiper-btn-next:hover, .swiper-btn-prev:hover {
197+
.swiper-btn-prev {
198+
left: -15px;
199+
}
200+
201+
.swiper-btn-next {
202+
right: -15px;
203+
}
204+
205+
.swiper-btn-next:hover,
206+
.swiper-btn-prev:hover {
193207
background: var(--accent, #38bdf8);
194208
color: #000;
195209
transform: translateY(-50%) scale(1.1);
196210
}
211+
197212
.swiper-button-disabled {
198213
opacity: 0.35;
199214
cursor: auto;
200215
pointer-events: none;
201216
}
202-
217+
218+
/* Pagination Indicators */
219+
.swiper-pagination {
220+
bottom: -35px !important;
221+
}
222+
223+
.swiper-pagination-bullet {
224+
background: var(--text-secondary, #94a3b8);
225+
opacity: 0.4;
226+
transition: 0.3s;
227+
width: 10px;
228+
height: 10px;
229+
}
230+
231+
.swiper-pagination-bullet-active {
232+
background: var(--accent, #38bdf8);
233+
transform: scale(1.3);
234+
opacity: 1;
235+
box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
236+
}
237+
203238
/* Mobile Responsiveness */
204239
@media (max-width: 767px) {
205240
.swiper-card-effect {
206-
height: 380px;
207-
max-width: 280px;
241+
height: 380px;
242+
max-width: 280px;
208243
padding: 20px 0;
209244
}
245+
210246
.swiper-card-effect .swiper-slide {
211247
padding: 1.25rem;
212248
}
249+
213250
.swiper-card-effect .swiper-slide h3 {
214251
font-size: 1.2rem;
215252
}
253+
216254
.swiper-card-effect .swiper-slide p {
217255
font-size: 0.85rem;
218256
margin-bottom: 0.5rem;
219257
}
258+
220259
.swiper-card-effect .swiper-slide img {
221260
height: 130px;
222261
margin-bottom: 0.75rem;
223262
}
263+
224264
/* Hide floating arrows on mobile for a swipe-only interface */
225-
.swiper-btn-next, .swiper-btn-prev {
226-
display: none;
265+
.swiper-btn-next,
266+
.swiper-btn-prev {
267+
display: none;
227268
}
228269
}
229270
</style>
230271

231272
<div class="hero-swiper-shell">
232273
<!-- External Prev Arrow -->
233274
<div class="swiper-btn-prev"><i class="fa-solid fa-arrow-left"></i></div>
234-
275+
235276
<div class="swiper swiper-card-effect">
236277
<div class="swiper-wrapper">
237278
<!-- Card 0: Sony -->
238279
<div class="swiper-slide">
239-
<div style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
280+
<div
281+
style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
240282
<i class="fa-solid fa-headphones"></i> Audio
241283
</div>
242284
<img src="posts/images/sony-wh-1000xm5-front.jpg" alt="Sony WH-1000XM5" loading="lazy">
243285
<h3>Sony WH-1000XM5</h3>
244286
<p>Top-tier active noise cancellation and supreme all-day comfort for deep focus sessions.</p>
245-
<a class="read-more" href="posts/sony-wh-1000xm5-review.html" style="font-weight: 700; display:inline-block; margin-top: 1rem;">Read Review <i class="fa-solid fa-arrow-right" style="margin-left: 5px;"></i></a>
287+
<a class="read-more" href="posts/sony-wh-1000xm5-review.html"
288+
style="font-weight: 700; display:inline-block; margin-top: 1rem;">Read Review <i
289+
class="fa-solid fa-arrow-right" style="margin-left: 5px;"></i></a>
246290
</div>
247291

248292
<!-- Card 1: Shure -->
249293
<div class="swiper-slide">
250-
<div style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
294+
<div
295+
style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
251296
<i class="fa-solid fa-microphone"></i> Broadcasting
252297
</div>
253298
<img src="posts/images/shure-sm7db-primary.jpg" alt="Shure SM7dB Microphone" loading="lazy">
254299
<h3>Shure SM7dB</h3>
255300
<p>The industry standard podcast microphone, now powered with a built-in clean preamp.</p>
256-
<a class="read-more" href="posts/shure-sm7db-review.html" style="font-weight: 700; display:inline-block; margin-top: 1rem;">Read Review <i class="fa-solid fa-arrow-right" style="margin-left: 5px;"></i></a>
301+
<a class="read-more" href="posts/shure-sm7db-review.html"
302+
style="font-weight: 700; display:inline-block; margin-top: 1rem;">Read Review <i
303+
class="fa-solid fa-arrow-right" style="margin-left: 5px;"></i></a>
257304
</div>
258305

259306
<!-- Card 2: Alienware -->
260307
<div class="swiper-slide">
261-
<div style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
308+
<div
309+
style="font-size: 0.75rem; color: var(--accent); font-weight: bold; text-transform: uppercase; margin-bottom: 0.5rem;">
262310
<i class="fa-solid fa-desktop"></i> Displays
263311
</div>
264312
<img src="posts/images/alienware-aw3423dwf-front.jpg" alt="Alienware AW3423DWF" loading="lazy">
265313
<h3>Alienware AW3423DWF</h3>
266314
<p>Stunning QD-OLED ultrawide performance delivering flawless visual immersion.</p>
267-
<a class="read-more" href="posts/alienware-aw3423dwf-review.html" style="font-weight: 700; display:inline-block; margin-top: 1rem;">Read Review <i class="fa-solid fa-arrow-right" style="margin-left: 5px;"></i></a>
315+
<a class="read-more" href="posts/alienware-aw3423dwf-review.html"
316+
style="font-weight: 700; display:inline-block; margin-top: 1rem;">Read Review <i
317+
class="fa-solid fa-arrow-right" style="margin-left: 5px;"></i></a>
268318
</div>
269319
</div>
320+
<!-- Clean Pagination Dots -->
321+
<div class="swiper-pagination"></div>
270322
</div>
271-
323+
272324
<!-- External Next Arrow -->
273325
<div class="swiper-btn-next"><i class="fa-solid fa-arrow-right"></i></div>
274326
</div>
275-
327+
276328
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
277329
<script>
278330
document.addEventListener('DOMContentLoaded', () => {
279-
const heroSwiper = new Swiper('.swiper-card-effect', {
280-
effect: 'cards',
281-
grabCursor: true,
282-
resistanceRatio: 0.65, // Adds a premium physical "bounce" rubber banding
283-
cardsEffect: {
284-
perSlideOffset: 12, // How far stacked cards stick out
285-
perSlideRotate: 4, // Subtle tilt when cards are stacked
286-
slideShadows: true, // Realistic shadow casting internally
287-
},
288-
navigation: {
289-
nextEl: '.swiper-btn-next',
290-
prevEl: '.swiper-btn-prev',
291-
},
292-
});
331+
const heroSwiper = new Swiper('.swiper-card-effect', {
332+
effect: 'cards',
333+
grabCursor: true,
334+
loop: true,
335+
autoplay: {
336+
delay: 4500,
337+
disableOnInteraction: true,
338+
pauseOnMouseEnter: true
339+
},
340+
resistanceRatio: 0.65, // Adds a premium physical "bounce" rubber banding
341+
cardsEffect: {
342+
perSlideOffset: 12, // How far stacked cards stick out
343+
perSlideRotate: 4, // Subtle tilt when cards are stacked
344+
slideShadows: true, // Realistic shadow casting internally
345+
},
346+
navigation: {
347+
nextEl: '.swiper-btn-next',
348+
prevEl: '.swiper-btn-prev',
349+
},
350+
pagination: {
351+
el: '.swiper-pagination',
352+
clickable: true,
353+
},
354+
});
293355
});
294356
</script>
295357
</div>

0 commit comments

Comments
 (0)