Carousel: new component

[CaioCDJ]

It adds the carousel component from daisyui. This can be useful because it simplifies the creation of the component.

This adds basically three types of carousel, basic, withArrows and withIndicators

The other smalls customization like vertical and the Full-bleed carousel can be applied just by adding its classes.

Examples

The component needs a string array with the images URLs.

  public array $images = [
        "https://images.unsplash.com/photo-1637077147282-afe85012f74d?ixid=M3wxMTI1OHwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxODgwNTE0N3w&ixlib=rb-4.0.3&q=85&w=1920",
        "https://images.unsplash.com/photo-1590425524758-2efb3f31eae2?ixid=M3wxMTI1OHwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxODgwNTE0N3w&ixlib=rb-4.0.3&q=85&w=1920",
        "https://images.unsplash.com/photo-1598638077897-d987bbf4f348?ixid=M3wxMTI1OHwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxODgwNTE0N3w&ixlib=rb-4.0.3&q=85&w=1920"
    ];

Basic Carousel

<x-carousel :images="$images" />

With Indicators

<x-carousel :withIndicators="true" :images="$images" />   

With arrows

<x-carousel :withArrows="true" :images="$images" />

[robsontenorio]

Nice !

The difference from Image Gallery is full screen mode and swipe gestures ?

https://mary-ui.com/docs/components/image-gallery

[CaioCDJ]

Nice !

The difference from Image Gallery is full screen mode and swipe gestures ?

https://mary-ui.com/docs/components/image-gallery

Exactly, is just the daisy default carousel.

[robsontenorio]

Are you able to evolve this PR to accept ALSO an alternative syntax ?

I think it is a common use case when you have a carousel , user will try to click it to navigate to somewhere.

public array $images = [
   [“image” => “xxx” , “link” => “yyy”],
   […],

];

[CaioCDJ]

Are you able to evolve this PR to accept ALSO an alternative syntax ?

I think it is a common use case when you have a carousel , user will try to click it to navigate to somewhere.

public array $images = [
   [“image” => “xxx” , “link” => “yyy”],
   […],

];

Sure, I will do it

[CaioCDJ]

Now the carousel works with an array of image links

  public array $images = [
        "https://images.unsplash.com/photo-1637077147282-afe85012f74d?ixid=M3wxMTI1OHwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxODgwNTE0N3w&ixlib=rb-4.0.3&q=85&w=1920",
        "https://images.unsplash.com/photo-1590425524758-2efb3f31eae2?ixid=M3wxMTI1OHwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxODgwNTE0N3w&ixlib=rb-4.0.3&q=85&w=1920",
        "https://images.unsplash.com/photo-1598638077897-d987bbf4f348?ixid=M3wxMTI1OHwwfDF8cmFuZG9tfHx8fHx8fHx8MTcxODgwNTE0N3w&ixlib=rb-4.0.3&q=85&w=1920"
    ];

And with links in the images

public array $images = [
   [“image” => “xxx” , “link” => “yyy”],
   […],

[robsontenorio]

I have realized the daisyUI pure CSS carousel has a limitation: it adds an entry to browser history when you navigate on items using arrows or indicators. So, if user try to navigate back or forward on browser it will navigate between carousel items. I think it is not a good UX.

I am working right now on a solution with Alpine to overcome this limitation.

[robsontenorio]

Thanks!