From 0d5f06b1d2f7d5eab88942d659191ae232c0d260 Mon Sep 17 00:00:00 2001 From: Azim Baji Krishna Date: Sun, 19 Nov 2023 15:18:17 +0530 Subject: [PATCH] Added carousel for testimonials --- css/style.css | 58 ++++++++--- index.html | 268 ++++++++++++++++++++++++++------------------------ js/script.js | 69 ++++++++++++- 3 files changed, 249 insertions(+), 146 deletions(-) diff --git a/css/style.css b/css/style.css index 16efde5..925c7a6 100644 --- a/css/style.css +++ b/css/style.css @@ -191,7 +191,12 @@ header { position: relative; overflow: hidden; } - +.gld_slide{ + display: flex; +} +.gld2_slide{ + display: flex; +} .scroller span{ white-space: nowrap; /* Prevent text from wrapping */ @@ -323,6 +328,7 @@ nav .btn-holder a { overflow: hidden; display: flex; flex-direction: column; + flex: 1; } .coupons-holder-slider{ @@ -517,13 +523,36 @@ nav .btn-holder a { flex-direction: column; align-items: center; justify-content: center; + /* overflow: hidden; */ +} +.testimonials .glide3{ + overflow: hidden; + width: 100%; +} +.gld3_track{ + position: relative; } - .testimonials .text-holder h1 { font-size: 2.8rem; letter-spacing: 3px; } +.testimonials .glide__arrows{ + position: absolute; + top: 50%; + left: 0; + right: 0; + display: flex; + justify-content: space-between; + align-items: center; +} +.testimonials .glide__arrows a{ + font-size: 2.5rem; + color: var(--light-orange); + font-weight: 400; + text-shadow: 0 0 5px #00000096; + cursor: pointer; +} .testimonials .logo-holder { margin-bottom: 35px; } @@ -540,7 +569,7 @@ nav .btn-holder a { .testimonials-holder { display: flex; - gap: 0 30px; + /* gap: 0 30px; */ margin-bottom: 40px; } @@ -1012,10 +1041,13 @@ footer .wrapper2 .social-holder{ /* .coupons-holder .cards:not(:last-child) { margin-right: 10px; } */ - .glide__slide{ + .gld_slide{ display: flex; justify-content: center; } + .gld2_slide{ + justify-content: center; + } .coupons-holder .cards .img-holder { width: 100%; height: 100%; @@ -1094,15 +1126,17 @@ footer .wrapper2 .social-holder{ } .testimonials-holder { justify-content: space-between; - overflow-x: auto; - scroll-snap-type: x mandatory; + /* overflow-x: auto; + scroll-snap-type: x mandatory; */ + /* overflow: hidden; */ margin-bottom: 20px; } .testimonials-holder .cards { max-width: 390px; flex: 0 0 100%; - scroll-snap-align: start; + /* scroll-snap-align: start; */ margin-bottom: 40px; + flex: 1; } .trampoline-benefits { @@ -1339,7 +1373,7 @@ footer .wrapper2 .social-holder{ scroll-snap-type: x mandatory; */ margin-bottom: 60px; } - .glide__slide{ + .gld_slide{ display: flex; justify-content: center; } @@ -1428,8 +1462,9 @@ footer .wrapper2 .social-holder{ } .testimonials-holder { justify-content: space-between; - overflow-x: auto; - scroll-snap-type: x mandatory; + /* overflow-x: auto; + scroll-snap-type: x mandatory; */ + /* overflow: hidden; */ margin-bottom: 20px; position: relative; z-index: 999; @@ -1440,8 +1475,9 @@ footer .wrapper2 .social-holder{ .testimonials-holder .cards { max-width: 390px; flex: 0 0 100%; - scroll-snap-align: start; + /* scroll-snap-align: start; */ margin-bottom: 40px; + flex: 1; } .trampoline-benefits { diff --git a/index.html b/index.html index 3c65275..b2f2ce5 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@
- +
@@ -66,7 +66,7 @@
-
+

Group of 10

@@ -80,7 +80,7 @@

20% OFF

-
+

Group of 5

@@ -94,7 +94,7 @@

10% OFF

-
+

Group of 3

@@ -108,7 +108,7 @@

10% OFF

-
+

Single ticket

@@ -125,7 +125,7 @@

5% OFF

- +
@@ -135,7 +135,7 @@

5% OFF

BUY TICKET ONLINE

-
+
@@ -159,7 +159,7 @@

BUY TICKET ONLINE

>
- +

@@ -178,11 +178,11 @@

BUY TICKET ONLINE



- - + + - - + +
@@ -201,116 +201,109 @@

BUY TICKET ONLINE

HAPPY TALES

-
-
-
- -
- +
+
+
+ +
+
+
+ +
+ +
+
+
+

Anant Verma

+

It was an incredible experience for my son.

+
+ +
+
+
-
-
-

Anant Verma

-

It was an incredible experience for my son.

-
- + +
+
+
+ +
+ +
+
+
+

Alok Agarwal

+

We had a wonderful experience at Skyjumper + trampoline park!.

+
+ +
+
+
-
-
-
-
- -
- + +
+
+
+ +
+ +
+
+
+

Shivangi Shah

+

The birthday was truly enjoyed by my son.

+
+ +
+
+
-
-
-

Alok Agarwal

-

We had a wonderfull experience at Skyjumper trampoline park!.

-
- + +
+
+
+ +
+ +
+
+
+

Peter Parker

+

It is a wonderful place to enjoy! we truly enjoyed it.

+
+ +
+
+
-
-
-
-
- -
- + +
+
+
+ +
+ +
+
+
+

Azim Krishna

+

This place is awesome! You can have so much fun 24/7.

+
+ +
+
+
+
-
-

Shivangi Shah

-

The birthday was truly enjoyed by my son.

-
- -
+
+ < + >
+
@@ -387,23 +380,32 @@

- +
- +
- +
@@ -415,10 +417,14 @@

ABOUT US

- Dive into the ultimate family fun zone at SkyJumper Trampoline Park! It's not just an amusement park but a fusion of fitness, sports, and thrills. Perfect for birthday bashes, school outings, corporate get-togethers, or any lively gathering. + Dive into the ultimate family fun zone at SkyJumper Trampoline Park! It's not just an amusement + park but a fusion of fitness, sports, and thrills. Perfect for birthday bashes, school outings, + corporate get-togethers, or any lively gathering.

- Unleash your inner Superman, bounce off walls, soar high, and enjoy with your loved ones on a sprawling playground of top-notch trampolines. Whether you're 3 or 93, we've got a special spot just for you. Come, jump in on the fun! + Unleash your inner Superman, bounce off walls, soar high, and enjoy with your loved ones on a + sprawling playground of top-notch trampolines. Whether you're 3 or 93, we've got a special spot + just for you. Come, jump in on the fun!

@@ -436,7 +442,7 @@

FOR BIRTHDAY &
CUSTOMIZED BOOKING

- +

Minimum 10 Jumpers | Inclusive of food

@@ -464,13 +470,15 @@

+91-888 2288 001

- © 2023. Skyjumpertrampolinepark. + © 2023. Skyjumpertrampolinepark.

Privacy Policy
@@ -480,8 +488,8 @@

+91-888 2288 001

document.getElementById('overlay').style.display = 'none'; }); - - + + \ No newline at end of file diff --git a/js/script.js b/js/script.js index a466520..66540e8 100644 --- a/js/script.js +++ b/js/script.js @@ -74,7 +74,7 @@ function updateCouponsHolder() {
-
+

Group of 10

@@ -88,7 +88,7 @@ function updateCouponsHolder() {
-
+

Group of 5

@@ -102,7 +102,7 @@ function updateCouponsHolder() {
-
+

Group of 3

@@ -116,7 +116,7 @@ function updateCouponsHolder() {
-
+

Single ticket

@@ -134,4 +134,63 @@ function updateCouponsHolder() {
`; -} \ No newline at end of file +} + + + +document.addEventListener("DOMContentLoaded", function () { + // Get all elements with the "testimonial-stars" class + const testimonialStarsElements = document.querySelectorAll('.testimonial-stars'); + + // SVG markup + const starsSVG = ` + + `; + + // Insert the SVG into each element with the "testimonial-stars" class + testimonialStarsElements.forEach((element) => { + element.innerHTML = starsSVG; + }); +}); + + +document.addEventListener("DOMContentLoaded", function () { + new Glide('.glide3', { + type: 'carousel', + startAt: 0, + perView: 3, + focusAt: 'center', + rewind: true, + gap: 30, + autoplay: 5000, // Set the autoplay interval in milliseconds (5 seconds in this example) + breakpoints: { + 767: { + perView: 2, + }, + 576: { + perView: 1, + } + } + }).mount(); +}); \ No newline at end of file