Skip to content

Commit d8802a8

Browse files
keshav861keshav861
authored
navigation arrows fixed for testimonials and sponsors (#31)
* Update globals.css * navigation arrows fixed
1 parent 9902f3d commit d8802a8

File tree

2 files changed

+105
-48
lines changed

2 files changed

+105
-48
lines changed

‎components/Slider.tsx‎

Lines changed: 50 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,24 @@
44
import { TestimonialData } from "../constants/testimonialsdata";
55
import { Sponsordata } from "../constants/sponsordata";
66
import Link from "next/link";
7-
import { Autoplay } from "swiper";
7+
import SwiperCore, { Autoplay, Navigation } from "swiper";
88
import { Swiper, SwiperSlide } from "swiper/react";
99
import "swiper/css";
10+
import "swiper/swiper-bundle.css";
1011

11-
interface sliderProps {
12+
SwiperCore.use([Autoplay, Navigation]);
13+
14+
interface SliderProps {
1215
isTestimonial: boolean;
1316
}
1417

15-
export default function Slider(props: sliderProps) {
18+
export default function Slider(props: SliderProps) {
1619
const { isTestimonial } = props;
1720

1821
return (
1922
<>
2023
{isTestimonial ? (
21-
<div id="testimonials-element" className="w-[100%]">
24+
<div id="testimonials-element" className="w-[100%] relative">
2225
<div className="mx-auto max-w-screen-xl py-16 sm:px-6 lg:px-8">
2326
<Swiper
2427
spaceBetween={25}
@@ -40,49 +43,48 @@ export default function Slider(props: sliderProps) {
4043
delay: 4000,
4144
disableOnInteraction: false,
4245
}}
43-
modules={[Autoplay]}
46+
navigation={{
47+
prevEl: ".swiper-button-prev",
48+
nextEl: ".swiper-button-next",
49+
}}
4450
className="h-full"
4551
>
46-
{TestimonialData.map((testimonial, index) => {
47-
return (
48-
<div key={index} className="swiper-slide h-full bg-white">
49-
<SwiperSlide className="bg-[#16161D] md:!h-[30rem] lg:!h-[30rem] p-8 xl:p-8 rounded-xl mx-2 border-solid border border-[#39393F]">
50-
<div className="h-full w-full flex flex-col justify-between">
51-
<p className="relative mt-4 text-gray-500">
52-
<span className="text-xl">&ldquo;</span>
53-
{testimonial.review.length <= 300
54-
? testimonial.review
55-
: testimonial.review.slice(0, 300) + "..."}
56-
<span className="text-xl">&rdquo;</span>
57-
</p>
58-
<div className="flex flex-row gap-4 text-left items-start">
59-
<figcaption className="flex justify-center items-center space-x-3">
60-
<img
61-
className="w-12 h-12 rounded-full"
62-
src="/images/favicon.png"
63-
alt="profile picture"
64-
/>
65-
<div className="space-y-0.5 font-medium dark:text-white text-left">
66-
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
67-
{testimonial.name}
68-
</p>
69-
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md text-left">
70-
{testimonial.designation}
71-
</p>
72-
</div>
73-
</figcaption>
52+
{TestimonialData.map((testimonial, index) => (
53+
<SwiperSlide key={index} className="bg-[#16161D] md:!h-[30rem] lg:!h-[30rem] p-8 xl:p-8 rounded-xl mx-2 border-solid border border-[#39393F]">
54+
<div className="h-full w-full flex flex-col justify-between">
55+
<p className="relative mt-4 text-gray-500">
56+
<span className="text-xl">&ldquo;</span>
57+
{testimonial.review.length <= 300 ? testimonial.review : testimonial.review.slice(0, 300) + "..."}
58+
<span className="text-xl">&rdquo;</span>
59+
</p>
60+
<div className="flex flex-row gap-4 text-left items-start">
61+
<figcaption className="flex justify-center items-center space-x-3">
62+
<img
63+
className="w-12 h-12 rounded-full"
64+
src="/images/favicon.png"
65+
alt="profile picture"
66+
/>
67+
<div className="space-y-0.5 font-medium dark:text-white text-left">
68+
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
69+
{testimonial.name}
70+
</p>
71+
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md text-left">
72+
{testimonial.designation}
73+
</p>
7474
</div>
75-
</div>
76-
</SwiperSlide>
75+
</figcaption>
76+
</div>
7777
</div>
78-
);
79-
})}
78+
</SwiperSlide>
79+
))}
8080
</Swiper>
81+
<div className="swiper-button-next"></div>
82+
<div className="swiper-button-prev"></div>
8183
</div>
8284
</div>
8385
) : (
8486
<div id="sponsor-element" className="w-[90%]">
85-
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
87+
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8 relative">
8688
<Swiper
8789
spaceBetween={25}
8890
breakpoints={{
@@ -103,13 +105,20 @@ export default function Slider(props: sliderProps) {
103105
delay: 4000,
104106
disableOnInteraction: false,
105107
}}
106-
modules={[Autoplay]}
108+
navigation={{
109+
prevEl: ".swiper-button-prev",
110+
nextEl: ".swiper-button-next",
111+
}}
112+
className="h-full"
107113
>
108114
{Sponsordata.map((sponsor, index) => {
109115
return (
110116
<div key={index} className="swiper-slide">
117+
111118
<SwiperSlide className="bg-[#16161D] md:!h-[35rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">
119+
112120
<div className="flex flex-col items-center justify-around space-y-7 ">
121+
113122
<p className="relative mt-4 text-gray-500">
114123
{sponsor.companydesc}
115124
</p>
@@ -138,6 +147,8 @@ export default function Slider(props: sliderProps) {
138147
);
139148
})}
140149
</Swiper>
150+
<div className="swiper-button-next ssn"></div>
151+
<div className="swiper-button-prev ssp"></div>
141152
</div>
142153
</div>
143154
)}

‎src/app/globals.css‎

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,35 +22,81 @@
2222

2323
body {
2424
color: rgb(var(--foreground-rgb));
25-
background: linear-gradient(
26-
to bottom,
25+
background: linear-gradient(to bottom,
2726
transparent,
28-
rgb(var(--background-end-rgb))
29-
)
30-
rgb(var(--background-start-rgb));
31-
overflow-x: hidden;
27+
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
28+
overflow-x: hidden;
3229

3330
}
31+
3432
body::-webkit-scrollbar {
3533
width: 8px;
3634
}
35+
3736
body::-webkit-scrollbar-track {
3837
background-color: #0E1016;
39-
38+
4039
}
4140

4241
body::-webkit-scrollbar-thumb {
4342
background-color: #2c2c2c;
44-
43+
4544
}
4645

4746
body::-webkit-scrollbar-thumb:hover {
4847
background-color: #555;
4948
}
50-
.prose{
49+
50+
.prose {
5151
display: grid;
5252
justify-content: center;
5353
align-items: center;
5454
text-align: justify;
5555
max-width: 1200px;
56+
}
57+
.ssp,
58+
.ssn {
59+
width: -700px !important;
60+
color: white !important;
61+
z-index: 10 !important;
62+
transition: all 0.3s ease !important;
63+
cursor: pointer;
64+
}
65+
.ssp:after{
66+
position: absolute !important;
67+
left: -100px !important;
68+
}
69+
.ssn:after{
70+
position: absolute !important;
71+
right: -100px !important;
72+
}
73+
.swiper-button-prev,
74+
.swiper-button-next {
75+
color: white !important;
76+
z-index: 10 !important;
77+
transition: all 0.3s ease !important;
78+
cursor: pointer;
79+
}
80+
.swiper-button-prev {
81+
left: 100px !important;
82+
}
83+
84+
.swiper-button-next {
85+
right: 90px !important;
86+
}
87+
88+
.swiper-container {
89+
position: relative !important;
90+
}
91+
92+
.swiper-wrapper {
93+
overflow: visible !important;
94+
}
95+
96+
97+
@media (max-width: 768px) {
98+
.swiper-button-prev,
99+
.swiper-button-next {
100+
display: none !important;
101+
}
56102
}

0 commit comments

Comments
 (0)