tamil culture issue solved
This commit is contained in:
parent
43c166e07a
commit
88abdc2313
@ -1,110 +1,118 @@
|
||||
'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'
|
||||
import 'swiper/css/navigation'
|
||||
|
||||
const cultureSlides = [
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-1.webp", icon: "/assets/img/home/icons/music.webp", title: "Instrumental Music", description: "In South Indian or Carnatic…", slug: "instrumental-music"},
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-2.webp", icon: "/assets/img/home/icons/bharatham.webp", title: "Bharatha Natyam Dance", description: "An ancient traditional art…",slug: "bharathnatyam-dance"},
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-3.webp", icon: "/assets/img/home/icons/vocal.webp", title: "Vocal", description: "Carnatic music is considered…", slug: "vocal"},
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-4.webp", icon: "/assets/img/home/icons/jallikattu.webp", title: "Jallikattu", description: "Jallikattu (Tamil: சல்லிகட்டு)…", slug: "jallikattu"},
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-5.webp", icon: "/assets/img/home/icons/entertainment.webp", title: "Entertainment-1", description: "Entertainment-1...", slug: "entertainment"},
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-6.webp", icon: "/assets/img/home/icons/indoor.webp", title: "Indoor game", description: "Indoor game...", slug: "indoor-game"},
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-7.webp", icon: "/assets/img/home/icons/silambam.webp", title: "Silambattam", description: "Silambam or Silambattam...", slug: "silambattam"},
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-1.webp", icon: "/assets/img/home/icons/music.webp", title: "Instrumental Music", description: "In South Indian or Carnatic…", slug: "instrumental-music" },
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-2.webp", icon: "/assets/img/home/icons/bharatham.webp", title: "Bharatha Natyam Dance", description: "An ancient traditional art…", slug: "bharathnatyam-dance" },
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-3.webp", icon: "/assets/img/home/icons/vocal.webp", title: "Vocal", description: "Carnatic music is considered…", slug: "vocal" },
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-4.webp", icon: "/assets/img/home/icons/jallikattu.webp", title: "Jallikattu", description: "Jallikattu (Tamil: சல்லிகட்டு)…", slug: "jallikattu" },
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-5.webp", icon: "/assets/img/home/icons/entertainment.webp", title: "Entertainment-1", description: "Entertainment-1...", slug: "entertainment" },
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-6.webp", icon: "/assets/img/home/icons/indoor.webp", title: "Indoor game", description: "Indoor game...", slug: "indoor-game" },
|
||||
{ image: "/assets/img/home/tamil-culture/tamil-culture-7.webp", icon: "/assets/img/home/icons/silambam.webp", title: "Silambattam", description: "Silambam or Silambattam...", slug: "silambattam" },
|
||||
]
|
||||
|
||||
export default function ArtAndCultureSection() {
|
||||
const prevRef = useRef<HTMLButtonElement | null>(null)
|
||||
const nextRef = useRef<HTMLButtonElement | null>(null)
|
||||
const swiperRef = useRef<any>(null)
|
||||
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) {
|
||||
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()
|
||||
}
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
setNavReady(true)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="memory1-section-area sp4">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 m-auto">
|
||||
<div className="memory-header heading2 space-margin60">
|
||||
<h2 className="text-anime-style-3">Tamil Culture</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
useEffect(() => {
|
||||
|
||||
<div className="row gx-5">
|
||||
<div className='col-lg-10'>
|
||||
<div className="col-lg-12 memory-slider-area">
|
||||
<Swiper
|
||||
modules={[Autoplay, Navigation]}
|
||||
slidesPerView={3}
|
||||
spaceBetween={30}
|
||||
autoplay={{ delay: 2500, disableOnInteraction: false }}
|
||||
loop={true}
|
||||
navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
|
||||
onSwiper={(swiper) => {
|
||||
swiperRef.current = swiper
|
||||
}}
|
||||
breakpoints={{
|
||||
320: { slidesPerView: 1, spaceBetween: 30 },
|
||||
575: { slidesPerView: 2, spaceBetween: 30 },
|
||||
767: { slidesPerView: 2, spaceBetween: 30 },
|
||||
991: { slidesPerView: 2, spaceBetween: 30 },
|
||||
1199: { slidesPerView: 3, spaceBetween: 30 },
|
||||
1350: { slidesPerView: 3, spaceBetween: 30 },
|
||||
}}
|
||||
className="owl-carousel"
|
||||
>
|
||||
{cultureSlides.map((slide, idx) => (
|
||||
<SwiperSlide className="memory-boxarea" key={idx}>
|
||||
<div className="img1 image-anime">
|
||||
<img src={slide.image} alt={slide.title} />
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div className="space18" />
|
||||
<p>{slide.title}</p>
|
||||
<div className="space12" />
|
||||
<Link href={`/tamil-culture-post?slug=${slide.slug}`}>{slide.description}</Link>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
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])
|
||||
|
||||
<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">
|
||||
<i className="fa-solid fa-angle-left" />
|
||||
</button>
|
||||
<button ref={nextRef} type="button" role="presentation" className="owl-next h1n" aria-label="Next Slide">
|
||||
<i className="fa-solid fa-angle-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-lg-2 ad-banner'>
|
||||
<div className="memory-boxarea pl-3">
|
||||
<div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
|
||||
<img className='culture-img' src="/assets/img/home/ad-banner/ad.webp" alt="Festival Poster" style={{ height: "500px", width: "100%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="memory1-section-area sp4">
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-lg-12 m-auto">
|
||||
<div className="memory-header heading2 space-margin60">
|
||||
<h2 className="text-anime-style-3">Tamil Culture</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
<div className="row gx-5">
|
||||
<div className='col-lg-10'>
|
||||
<div className="col-lg-12 memory-slider-area">
|
||||
<Swiper
|
||||
modules={[Autoplay, Navigation]}
|
||||
slidesPerView={3}
|
||||
spaceBetween={30}
|
||||
autoplay={{ delay: 2500, disableOnInteraction: false }}
|
||||
loop={true}
|
||||
onSwiper={(swiper) => (swiperRef.current = swiper)}
|
||||
navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
|
||||
breakpoints={{
|
||||
320: { slidesPerView: 1, spaceBetween: 30 },
|
||||
575: { slidesPerView: 2, spaceBetween: 30 },
|
||||
767: { slidesPerView: 2, spaceBetween: 30 },
|
||||
991: { slidesPerView: 2, spaceBetween: 30 },
|
||||
1199: { slidesPerView: 3, spaceBetween: 30 },
|
||||
1350: { slidesPerView: 3, spaceBetween: 30 },
|
||||
}}
|
||||
className="owl-carousel"
|
||||
>
|
||||
{cultureSlides.map((slide, idx) => (
|
||||
<SwiperSlide className="memory-boxarea" key={idx}>
|
||||
<div className="img1 image-anime">
|
||||
<img src={slide.image} alt={slide.title} />
|
||||
</div>
|
||||
<div className="content-area">
|
||||
<img src={slide.icon} alt={`${slide.title} Icon`} className="logo1 keyframe5" />
|
||||
<div className="arrow">
|
||||
<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}`} 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" className="owl-prev h1p" aria-label="Previous Slide">
|
||||
<i className="fa-solid fa-angle-left" />
|
||||
</button>
|
||||
<button ref={nextRef} type="button" className="owl-next h1n" aria-label="Next Slide">
|
||||
<i className="fa-solid fa-angle-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='col-lg-2 ad-banner'>
|
||||
<div className="memory-boxarea pl-3">
|
||||
<div className="img1" data-aos="zoom-in" data-aos-duration={1000}>
|
||||
<img className='culture-img' src="/assets/img/home/ad-banner/ad.webp" alt="Festival Poster" style={{ height: "500px", width: "100%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user