Components
Loading preview...
@ui-layouts
npx shadcn@latest add https://21st.dev/r/uilayout.contact/progressive-carousel'use client';
import Image from 'next/image';
import {
SliderBtnGroup,
ProgressSlider,
SliderBtn,
SliderContent,
SliderWrapper,
} from '@/components/ui/progressive-carousel';
const items = [
{
img: "https://images.unsplash.com/photo-1709949908058-a08659bfa922?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
title: 'Bridge',
desc: 'A breathtaking view of a city illuminated by countless lights, showcasing the vibrant and bustling nightlife.',
sliderName: 'bridge',
},
{
img: "https://images.unsplash.com/photo-1518972734183-c5b490a7c637?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
title: 'Mountains View',
desc: 'A serene lake reflecting the surrounding mountains and trees, creating a mirror-like surface.',
sliderName: 'mountains',
},
{
img: "https://images.unsplash.com/photo-1548192746-dd526f154ed9?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
title: 'Autumn',
desc: 'A picturesque path winding through a dense forest adorned with vibrant autumn foliage.',
sliderName: 'autumn',
},
{
img: "https://images.unsplash.com/photo-1628965882741-570e75becd5d?q=80&w=687&auto=format&fit=crop",
title: 'Foggy',
sliderName: 'foggy',
desc: 'A stunning foggy view over the foresh, with the sun casting a golden glow across the forest. ',
},
];
export default function Demos() {
return (
<main className="max-w-4xl px-10 mx-auto">
<ProgressSlider vertical={false} activeSlider='bridge'>
<SliderContent>
{items.map((item, index) => (
<SliderWrapper key={index} value={item?.sliderName}>
<Image
className='rounded-xl 2xl:h-[500px] h-[450px] object-cover'
src={item.img}
width={1900}
height={1080}
alt={item.desc}
/>
</SliderWrapper>
))}
</SliderContent>
<SliderBtnGroup className='absolute bottom-0 h-fit dark:text-white text-black dark:bg-black/40 bg-white/40 backdrop-blur-md overflow-hidden grid grid-cols-2 md:grid-cols-4 rounded-md'>
{items.map((item, index) => (
<SliderBtn
key={index}
value={item?.sliderName}
className='text-left cursor-pointer p-3 border-r'
progressBarClass='dark:bg-black bg-white h-full'
>
<h2 className='relative px-4 rounded-full w-fit dark:bg-white dark:text-black text-white bg-gray-900 mb-2'>
{item.title}
</h2>
<p className='text-sm font-medium line-clamp-2'>{item.desc}</p>
</SliderBtn>
))}
</SliderBtnGroup>
</ProgressSlider>
</main>
);
}