Last active
October 24, 2024 07:11
-
-
Save iamashiqur/c6e37346f68298adbf43c9f3bc2d7bd2 to your computer and use it in GitHub Desktop.
Custom swiper slider with custom arrow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use client' | |
| import Image from 'next/image' | |
| import SectionHeading from '../../components/SectionHeading' | |
| import avatar from '/public/assets/avatar.jpeg' | |
| // Import swiper/react | |
| import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/16/solid' | |
| import 'swiper/css' | |
| import 'swiper/css/navigation' | |
| import { Autoplay, Navigation } from 'swiper/modules' | |
| import { Swiper, SwiperSlide } from 'swiper/react' | |
| const CustomSwiper = () => { | |
| return ( | |
| <section className="reviews section-padding pt-0"> | |
| <div className="container"> | |
| <SectionHeading title="Reviews" desc="What our clients love about us." /> | |
| <div className="relative"> | |
| <Swiper | |
| slidesPerView={3} | |
| spaceBetween={20} | |
| loop={true} | |
| autoplay={{ | |
| delay: 2500, | |
| disableOnInteraction: false | |
| }} | |
| navigation={{ | |
| nextEl: '#swiper-next2', | |
| prevEl: '#swiper-prev2' | |
| }} | |
| modules={[Autoplay, Navigation]} | |
| grabCursor={true} | |
| className="relative max-w-[1440px]" // Added padding here to avoid overlap with arrow buttons | |
| > | |
| {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((items, index) => ( | |
| <SwiperSlide key={index}> | |
| <div className="rounded-lg bg-clr-87 px-8 py-12"> | |
| <p className="mb-5 text-sm font-medium leading-[150%] text-white"> | |
| "This is a very complex and beautiful set of elements. Under the hood it comes with the | |
| best things from 2 different worlds: Figma and Tailwind.” | |
| </p> | |
| <div className="flex items-center gap-3"> | |
| <Image width={32} height={32} className="rounded-full" src={avatar} alt="avatar" /> | |
| <div> | |
| <h6 className="mb-1 font-sora text-base font-semibold text-white">Bonnie Green</h6> | |
| <p className="text-sm text-white">Web developer @themesberg</p> | |
| </div> | |
| </div> | |
| </div> | |
| </SwiperSlide> | |
| ))} | |
| </Swiper> | |
| {/* Custom Arrow Buttons */} | |
| <button | |
| id="swiper-prev2" | |
| className="absolute left-0 top-1/2 z-10 flex h-[50px] w-[50px] -translate-y-1/2 items-center justify-center rounded-lg bg-clr-87" | |
| > | |
| <ChevronLeftIcon className="size-6 text-white" /> | |
| </button> | |
| <button | |
| id="swiper-next2" | |
| className="absolute right-0 top-1/2 z-10 flex h-[50px] w-[50px] -translate-y-1/2 items-center justify-center rounded-lg bg-clr-87" | |
| > | |
| <ChevronRightIcon className="size-6 text-white" /> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| ) | |
| } | |
| export default CustomSwiper |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment