MetatroncubeSoftwareSolutions/TamilCulturalAssociation
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tamil culture issue solved

Browse Source
This commit is contained in:
Selvi 2025-07-26 14:07:24 +05:30
parent 43c166e07a
commit 88abdc2313
2 changed files with 118 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
components/home/ArtsAndCultureSection.tsx
View File

@ -1,7 +1,7 @@
'use client'
import Link from 'next/link'
import { useRef, useEffect } from 'react'
import { useRef, useEffect, useState } from 'react'
import { Autoplay, Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/css'
@ -20,17 +20,23 @@ const cultureSlides = [
export default function ArtAndCultureSection() {
const prevRef = useRef<HTMLButtonElement | null>(null)
const nextRef = useRef<HTMLButtonElement | null>(null)
const [navReady, setNavReady] = useState(false)
const swiperRef = useRef<any>(null)
useEffect(() => {
if (swiperRef.current && swiperRef.current.params) {
setNavReady(true)
}, [])
useEffect(() => {
if (navReady && swiperRef.current && swiperRef.current.params) {
swiperRef.current.params.navigation.prevEl = prevRef.current
swiperRef.current.params.navigation.nextEl = nextRef.current
swiperRef.current.navigation.destroy()
swiperRef.current.navigation.init()
swiperRef.current.navigation.update()
}
}, [])
}, [navReady])
return (
<div className="memory1-section-area sp4">
@ -52,10 +58,8 @@ export default function ArtAndCultureSection() {
spaceBetween={30}
autoplay={{ delay: 2500, disableOnInteraction: false }}
loop={true}
onSwiper={(swiper) => (swiperRef.current = swiper)}
navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
onSwiper={(swiper) => {
swiperRef.current = swiper
}}
breakpoints={{
320: { slidesPerView: 1, spaceBetween: 30 },
575: { slidesPerView: 2, spaceBetween: 30 },
@ -74,22 +78,26 @@ export default function ArtAndCultureSection() {
<div className="content-area">
<img src={slide.icon} alt={`${slide.title} Icon`} className="logo1 keyframe5" />
<div className="arrow">
<Link href={slide.slug}><i className="fa-solid fa-arrow-right" /></Link>
<Link href={`/tamil-culture-post?slug=${slide.slug}`}>
<i className="fa-solid fa-arrow-right" />
</Link>
</div>
<div className="space18" />
<p>{slide.title}</p>
<div className="space12" />
<Link href={`/tamil-culture-post?slug=${slide.slug}`}>{slide.description}</Link>
<Link href={`/tamil-culture-post?slug=${slide.slug}`} className="description-link">
{slide.description}
</Link>
</div>
</SwiperSlide>
))}
</Swiper>
<div className="owl-nav" style={{ position: "absolute", top: "-80px", right: "40px" }}>
<button ref={prevRef} type="button" role="presentation" className="owl-prev h1p" aria-label="Previous Slide">
<button ref={prevRef} type="button" className="owl-prev h1p" aria-label="Previous Slide">
<i className="fa-solid fa-angle-left" />
</button>
<button ref={nextRef} type="button" role="presentation" className="owl-next h1n" aria-label="Next Slide">
<button ref={nextRef} type="button" className="owl-next h1n" aria-label="Next Slide">
<i className="fa-solid fa-angle-right" />
</button>
</div>

19
public/assets/css/main.css
View File

@ -28342,3 +28342,22 @@ h2.custom-text.aos-init.aos-animate{
padding: 10px !important;
}
}
.description-link {
display: inline-block;
color: inherit;
text-decoration: none;
position: relative;
z-index: 2;
cursor: pointer;
}
.description-link:hover {
color: #d9534f;
}
.owl-nav button {
z-index: 10;
position: relative;
background: none;
border: none;
}