Skip to content

Commit

Permalink
navigation arrows fixed for testimonials and sponsors (#31)
Browse files Browse the repository at this point in the history 
* Update globals.css

* navigation arrows fixed
  • Loading branch information
@keshav861
keshav861 authored Aug 22, 2024
1 parent 9902f3d commit d8802a8
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 48 deletions.
89 changes: 50 additions & 39 deletions components/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@
import { TestimonialData } from "../constants/testimonialsdata";
import { Sponsordata } from "../constants/sponsordata";
import Link from "next/link";
import { Autoplay } from "swiper";
import SwiperCore, { Autoplay, Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/swiper-bundle.css";

interface sliderProps {
SwiperCore.use([Autoplay, Navigation]);

interface SliderProps {
isTestimonial: boolean;
}

export default function Slider(props: sliderProps) {
export default function Slider(props: SliderProps) {
const { isTestimonial } = props;

return (
<>
{isTestimonial ? (
<div id="testimonials-element" className="w-[100%]">
<div id="testimonials-element" className="w-[100%] relative">
<div className="mx-auto max-w-screen-xl py-16 sm:px-6 lg:px-8">
<Swiper
spaceBetween={25}
Expand All @@ -40,49 +43,48 @@ export default function Slider(props: sliderProps) {
delay: 4000,
disableOnInteraction: false,
}}
modules={[Autoplay]}
navigation={{
prevEl: ".swiper-button-prev",
nextEl: ".swiper-button-next",
}}
className="h-full"
>
{TestimonialData.map((testimonial, index) => {
return (
<div key={index} className="swiper-slide h-full bg-white">
<SwiperSlide className="bg-[#16161D] md:!h-[30rem] lg:!h-[30rem] p-8 xl:p-8 rounded-xl mx-2 border-solid border border-[#39393F]">
<div className="h-full w-full flex flex-col justify-between">
<p className="relative mt-4 text-gray-500">
<span className="text-xl">&ldquo;</span>
{testimonial.review.length <= 300
? testimonial.review
: testimonial.review.slice(0, 300) + "..."}
<span className="text-xl">&rdquo;</span>
</p>
<div className="flex flex-row gap-4 text-left items-start">
<figcaption className="flex justify-center items-center space-x-3">
<img
className="w-12 h-12 rounded-full"
src="/images/favicon.png"
alt="profile picture"
/>
<div className="space-y-0.5 font-medium dark:text-white text-left">
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
{testimonial.name}
</p>
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md text-left">
{testimonial.designation}
</p>
</div>
</figcaption>
{TestimonialData.map((testimonial, index) => (
<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]">
<div className="h-full w-full flex flex-col justify-between">
<p className="relative mt-4 text-gray-500">
<span className="text-xl">&ldquo;</span>
{testimonial.review.length <= 300 ? testimonial.review : testimonial.review.slice(0, 300) + "..."}
<span className="text-xl">&rdquo;</span>
</p>
<div className="flex flex-row gap-4 text-left items-start">
<figcaption className="flex justify-center items-center space-x-3">
<img
className="w-12 h-12 rounded-full"
src="/images/favicon.png"
alt="profile picture"
/>
<div className="space-y-0.5 font-medium dark:text-white text-left">
<p className="font-medium font-SpaceGrotesk opacity-90 text-white text-xl">
{testimonial.name}
</p>
<p className="font-medium font-SpaceGrotesk text-white opacity-70 text-md text-left">
{testimonial.designation}
</p>
</div>
</div>
</SwiperSlide>
</figcaption>
</div>
</div>
);
})}
</SwiperSlide>
))}
</Swiper>
<div className="swiper-button-next"></div>
<div className="swiper-button-prev"></div>
</div>
</div>
) : (
<div id="sponsor-element" className="w-[90%]">
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
<div className="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8 relative">
<Swiper
spaceBetween={25}
breakpoints={{
Expand All @@ -103,13 +105,20 @@ export default function Slider(props: sliderProps) {
delay: 4000,
disableOnInteraction: false,
}}
modules={[Autoplay]}
navigation={{
prevEl: ".swiper-button-prev",
nextEl: ".swiper-button-next",
}}
className="h-full"
>
{Sponsordata.map((sponsor, index) => {
return (
<div key={index} className="swiper-slide">

<SwiperSlide className="bg-[#16161D] md:!h-[35rem] p-8 xl:p-16 rounded-xl mx-2 border-solid border border-[#39393F]">

<div className="flex flex-col items-center justify-around space-y-7 ">

<p className="relative mt-4 text-gray-500">
{sponsor.companydesc}
</p>
Expand Down Expand Up @@ -138,6 +147,8 @@ export default function Slider(props: sliderProps) {
);
})}
</Swiper>
<div className="swiper-button-next ssn"></div>
<div className="swiper-button-prev ssp"></div>
</div>
</div>
)}
Expand Down
64 changes: 55 additions & 9 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,35 +22,81 @@

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
background: linear-gradient(to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
overflow-x: hidden;
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
overflow-x: hidden;

}

body::-webkit-scrollbar {
width: 8px;
}

body::-webkit-scrollbar-track {
background-color: #0E1016;

}

body::-webkit-scrollbar-thumb {
background-color: #2c2c2c;

}

body::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
.prose{

.prose {
display: grid;
justify-content: center;
align-items: center;
text-align: justify;
max-width: 1200px;
}
.ssp,
.ssn {
width: -700px !important;
color: white !important;
z-index: 10 !important;
transition: all 0.3s ease !important;
cursor: pointer;
}
.ssp:after{
position: absolute !important;
left: -100px !important;
}
.ssn:after{
position: absolute !important;
right: -100px !important;
}
.swiper-button-prev,
.swiper-button-next {
color: white !important;
z-index: 10 !important;
transition: all 0.3s ease !important;
cursor: pointer;
}
.swiper-button-prev {
left: 100px !important;
}

.swiper-button-next {
right: 90px !important;
}

.swiper-container {
position: relative !important;
}

.swiper-wrapper {
overflow: visible !important;
}


@media (max-width: 768px) {
.swiper-button-prev,
.swiper-button-next {
display: none !important;
}
}

0 comments on commit d8802a8

Please sign in to comment.