Scribd
Upload
15 views

caraousel

Uploaded by

sajid0khan-790945
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

caraousel

Uploaded by

sajid0khan-790945
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

"use client"

import React, { useState } from 'react'


import { FaArrowRight,FaArrowLeft } from "react-icons/fa6";

const industries = [
{
image: "https://via.placeholder.com/300x400",
title: "Industry 1",
description: "This is the first industry's description.",
link: "Learn More",
},
];

const Caraousel = () => {


const [currentIndex, setCurrentIndex] = useState(0);
const visibleItems = 3; // Number of items to show on large screens

const handleNext = () => {


setCurrentIndex((prev) =>
prev + visibleItems < industries.length ? prev + 1 : prev
);
};

const handlePrevious = () => {


setCurrentIndex((prev) => (prev > 0 ? prev - 1 : 0));
};

return (
<div className="relative mt-5 w-full max-w-6xl mx-auto overflow-hidden">
{/* Carousel Content */}
<div
className="flex transition-transform duration-500 ease-in-out"
style={{
transform: `translateX(-${currentIndex * (100 / visibleItems)}%)`,
}}
>
{industries.map((industry, index) => (
<div
key={index}
className="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-4"
>
<div className="w-[300px] h-[400px] mx-auto overflow-hidden">
{/* Image */}
<div className="group h-[300px] overflow-hidden rounded-lg">
<img
src={industry.image}
alt={industry.title}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
/>
</div>
{/* Text Content */}
<div className="mt-4 text-center">
<h3 className="text-lg font-bold">{industry.title}</h3>
<p className="text-gray-600 text-sm">{industry.description}</p>
<button className="mt-2 text-blue-600 hover:text-blue-800">
{industry.link}
</button>
</div>
</div>
</div>
))}
</div>
{/* Navigation Buttons */}
<button
onClick={handlePrevious}
className="absolute top-1/2 left-2 transform -translate-y-[60px] bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700"
>
<FaArrowLeft className="w-6 h-6" />
</button>
<button
onClick={handleNext}
className="absolute top-1/2 right-2 transform -translate-y-[60px] bg-gray-800 text-white p-2 rounded-full hover:bg-gray-700"
>
<FaArrowRight className="w-6 h-6" />
</button>
</div>
)
}

export default Caraousel

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy