Slider

1"use client";
2
3import {
4Slider,
5SliderContent,
6SliderIndicatorDots,
7SliderItem,
8} from "@/components/component-x/slider";
9
10export function SliderPreview() {
11return (
12  <div className="w-full h-full p-2">
13    <Slider className="w-full h-full flex flex-col">
14      <SliderContent className="flex-1">
15        <SliderItem className="flex items-center justify-center border h-full">
16          <span className="text-2xl text-foreground">Slide 1</span>
17        </SliderItem>
18        <SliderItem className="flex items-center justify-center border h-full">
19          <span className="text-2xl text-foreground">Slide 2</span>
20        </SliderItem>
21        <SliderItem className="flex items-center justify-center border h-full">
22          <span className="text-2xl text-foreground">Slide 3</span>
23        </SliderItem>
24      </SliderContent>
25      <SliderIndicatorDots />
26    </Slider>
27  </div>
28);
29}
30

1"use client";
2
3import {
4Slider,
5SliderContent,
6SliderItem,
7SliderNav,
8SliderNavTrigger,
9} from "@/components/component-x/slider";
10
11export function SliderWithTab() {
12return (
13  <div className="w-full h-full p-2">
14    <Slider className="border flex flex-col h-full ">
15      <SliderNav className="border-b">
16        <SliderNavTrigger>Featured</SliderNavTrigger>
17        <SliderNavTrigger>Popular</SliderNavTrigger>
18        <SliderNavTrigger>Recent</SliderNavTrigger>
19      </SliderNav>
20      <SliderContent className="flex-1">
21        <SliderItem className="flex items-center justify-center bg-muted/25 h-full">
22          <span>Featured Content</span>
23        </SliderItem>
24        <SliderItem className="flex items-center justify-center bg-muted/25 h-full">
25          <span>Popular Content</span>
26        </SliderItem>
27        <SliderItem className="flex items-center justify-center bg-muted/25 h-full">
28          <span>Recent Content</span>
29        </SliderItem>
30      </SliderContent>
31    </Slider>
32  </div>
33);
34}
35

1"use client";
2
3import {
4Slider,
5SliderContent,
6SliderIndicatorLabels,
7SliderItem,
8} from "@/components/component-x/slider";
9
10export function SliderLabelIndicators() {
11return (
12  <div className="w-full h-full">
13    <Slider className="w-full h-full overflow-hidden border flex flex-col">
14      <SliderContent className="flex-1">
15        <SliderItem className="bg-muted/25 flex items-center justify-center h-full border">
16          <span className="text-2xl text-foreground">First</span>
17        </SliderItem>
18        <SliderItem className="bg-muted/25 flex items-center justify-center h-full border">
19          <span className="text-2xl text-foreground">Second</span>
20        </SliderItem>
21        <SliderItem className="bg-muted/25 flex items-center justify-center h-full border">
22          <span className="text-2xl text-foreground">Third</span>
23        </SliderItem>
24        <SliderItem className="bg-muted/25 flex items-center justify-center h-full border">
25          <span className="text-2xl text-foreground">Fourth</span>
26        </SliderItem>
27      </SliderContent>
28      <div className="flex justify-center p-2">
29        <SliderIndicatorLabels
30          classNameButton="hover:text-foreground transition-all duration-300"
31          labels={["First", "Second", "Third", "Fourth"]}
32        />
33      </div>
34    </Slider>
35  </div>
36);
37}
38

1"use client";
2
3import {
4Slider,
5SliderContent,
6SliderIndicatorDots,
7SliderItem,
8SliderNavigation,
9} from "@/components/component-x/slider";
10
11export function SliderWithButtons() {
12return (
13  <div className="w-full h-full">
14    <Slider className="h-full flex flex-col">
15      <SliderContent className="flex-1">
16        <SliderItem className="bg-muted/25 flex items-center justify-center h-full border">
17          <span className="text-2xl text-foreground">Slide 1</span>
18        </SliderItem>
19        <SliderItem className="bg-muted/25 flex items-center justify-center h-full border">
20          <span className="text-2xl text-foreground">Slide 2</span>
21        </SliderItem>
22        <SliderItem className="bg-muted/25 flex items-center justify-center h-full border">
23          <span className="text-2xl text-foreground">Slide 3</span>
24        </SliderItem>
25      </SliderContent>
26      <div className="flex items-center justify-between p-2">
27        <div className="flex-1 flex justify-center items-center">
28          <SliderIndicatorDots />
29        </div>
30        <SliderNavigation />
31      </div>
32    </Slider>
33  </div>
34);
35}
36