Carousel
A carousel shows slides in rotation without Javascript. If you want to display full-width slides and have manual control over them, look at the slideshow component.
Slide 1
Here is a carousel.
Slide 2
A carousel shows a list of children slides on limited space.
Slide 3
As the slides, together, are too large to all be shown at the same time.
Slide 4
The carousel solves this issue by rotating them into view, hence its name.
Slide 5
And it goes on forever!
Slide 1
Here is a carousel.
Slide 2
A carousel shows a list of children slides on limited space.
Slide 3
As the slides, together, are too large to all be shown at the same time.
Slide 4
The carousel solves this issue by rotating them into view, hence its name.
Slide 5
And it goes on forever!
<x-carousel
:slides="$slides"
class="[--slides_per_stop:1] md:[--slides_per_stop:2] xl:[--slides_per_stop:3]"
>
@foreach ($component->slides as $slide)
<x-card class="bg-base-100" :title="$slide['title']">
<x-slot:figure class="h-45"><img src="{{ $slide['img'] ?? '/assets/carousel-horse.jpg' }}"/></x-slot:figure>
{{ $slide['text'] }}
</x-card>
@endforeach
</x-carousel>
slides = [
[
'title' => 'Slide 1',
'text'=> 'Here is a carousel.',
], [
'title' => 'Slide 2',
'text'=> 'A carousel shows a list of children slides on limited space.',
], [
'title' => 'Slide 3',
'text'=> 'As the slides, together, are too large to all be shown at the same time.',
], [
'title' => 'Slide 4',
'text'=> 'The carousel solves this issue by rotating them into view, hence its name.',
], [
'img' => '/assets/cowboy.png',
'title' => 'Slide 5',
'text'=> 'And it goes on forever!',
]
];
Carousels work best when their children all have the same size.
For carousels that contain picture, said pictures should at least all have very similar ratios, otherwise images will be resized, often in undesirable ways.
For carousels that contain picture, said pictures should at least all have very similar ratios, otherwise images will be resized, often in undesirable ways.
#Controlling the timing
Carousel are animated according to 2 timing values, in seconds:
The
time-per-slide(default: 4) attribute determines how long slides stay in place before the next transition.The
rotation-time(default: 1) attribute determines how long it takes for the carousel to move to the next slide.
In both cases, the higher the value, the slower the carousel.
Below are 2 examples of carousel rotating at the same speed, except they have swapped values for the 2 attributes, and therefore feel quite different from one another.
<x-carousel
:slides="explode(' ', $sentence)"
time-per-slide="1"
rotation-time=".5"
class="[--slides_per_stop:2] md:[--slides_per_stop:4]"
>
@foreach($component->slides as $index => $word)
<x-card class="bg-base-300" :title="$word">Slide {{ $index + 1 }}</x-card>
@endforeach
</x-carousel>
<x-carousel
:slides="explode(' ', $sentence)"
time-per-slide=".5"
rotation-time="1"
class="[--slides_per_stop:2] md:[--slides_per_stop:4]"
>
@foreach($component->slides as $index => $word)
<x-card class="bg-base-300" :title="$word">Slide {{ $index + 1 }}</x-card>
@endforeach
</x-carousel>
sentence = "These 2 carousels turn at their own customised pace, but they stay somewhat in sync with each other.";
#Time of transition
#Hardcoded slides
If that is what you want, you can hardcode the slides that belong to a carousel. If you choose do so, slides must satisfy either of the following conditions:
Its children are
<x-slide>components.Or it is provided the
count={integer}attribute as a clue for what it contains.
With slides
With cards and
count attribute
count attribute
With slides
<x-carousel class="[--slides_per_stop:2] md:[--slides_per_stop:4]">
<x-slide class="p-2 bg-base-100 rounded-lg border-1 border-primary">Slide 1</x-slide>
<x-slide class="p-2 bg-base-100 rounded-lg border-1 border-secondary">Slide 2</x-slide>
<x-slide class="p-2 bg-base-100 rounded-lg border-1 border-info">Slide 3</x-slide>
<x-slide class="p-2 bg-base-100 rounded-lg border-1 border-success">Slide 4</x-slide>
<x-slide class="p-2 bg-base-100 rounded-lg border-1 border-warning">Slide 5</x-slide>
<x-slide class="p-2 bg-base-100 rounded-lg border-1 border-error">Slide 6</x-slide>
</x-carousel>
<span>With cards and<br/>count attribute</span>
<x-carousel count="6" class="py-px [--slides_per_stop:2] md:[--slides_per_stop:4]">
<x-card class="bg-base-100 border-1 border-primary">Card 1</x-card>
<x-card class="bg-base-100 border-1 border-secondary">Card 2</x-card>
<x-card class="bg-base-100 border-1 border-info">Card 3</x-card>
<x-card class="bg-base-100 border-1 border-success">Card 4</x-card>
<x-card class="bg-base-100 border-1 border-warning">Card 5</x-card>
<x-card class="bg-base-100 border-1 border-error">Card 6</x-card>
</x-carousel>
#Using <template>
With <template>, the rendering can be delegated to the client. The example below uses Alpine to render the same cards as the PHP approach.
<x-carousel
:slides="$slides"
class="[--slides_per_stop:1] md:[--slides_per_stop:2] xl:[--slides_per_stop:3]"
>
<template x-for="(slide) in slides">
<x-card class="bg-base-100">
<x-slot:figure class="h-45"><img x-bind:src="slide.img ?? '/assets/carousel-horse.jpg'"/></x-slot:figure>
<x-slot:title x-text="slide.title"></x-slot:title>
<span x-text="slide.text"></span>
</x-card>
</template>
</x-carousel>
slides = [
[ 'title' => 'Slide 1', 'text' => 'Here is a carousel.' ],
[ 'title' => 'Slide 2', 'text' => 'A carousel shows a list of children slides on limited space.' ],
[ 'title' => 'Slide 3', 'text' => 'But the slides, together, are too large to all be shown at the same time.' ],
[ 'title' => 'Slide 4', 'text' => 'The carousel solves this issue by, as per its name, rotating them into view.' ],
[ 'title' => 'Slide 5', 'text' => 'And it goes on forever!', 'img' => '/assets/cowboy.png' ]
];
#Examples
#Carousel in a card
The below cards have 3 carousels each, for the figure, the subtitle and the text. They work well together through:
Setting them on exactly the same timing.
Cheating with the padding/margins of the card, as the 3 carousels need to have the exact same width.
China
France
Italy
Japan
Spain
USA
@foreach ($countries as $country => $card)
<x-card class="*:px-0 border-1 border-base-300 bg-base-100">
<x-slot:figure class="h-40">
<x-carousel
:slides="$card"
time-per-slide="7"
class="[--slides_per_stop:1]"
>
@foreach ($component->slides as $slide)
<img src="{{ $slide['img'] }}"/>
@endforeach
</x-carousel>
</x-slot:figure>
<x-slot:title class="px-0 flex flex-col items-start gap-0">
<span class="px-6 -mb-2">{{ $country }}</span>
<x-carousel
:slides="$card"
time-per-slide="7"
class="w-full [--slides_per_stop:1]"
>
@foreach ($component->slides as $slide)
<span class="px-6 text-base">{{ $slide['site'] }}</span>
@endforeach
</x-carousel>
</x-slot:title>
<x-carousel
:slides="$card"
time-per-slide="7"
class="w-full [--slides_per_stop:1]"
>
@foreach ($component->slides as $slide)
<span class="px-6">{{ $slide['description'] }}</span>
@endforeach
</x-carousel>
<x-slot:actions class="px-6">
<x-button color="accent" label="Book my trip now"/>
</x-slot:actions>
</x-card>
@endforeach
countries = [
'China' => [
[
'site' => 'Mount Emei (峨眉山)',
'description' => 'Enter the 2000-year-old temple on the highest of the Four Sacred Buddhist Mountains of China.',
'img' => '/assets/sightseeing/china/emei.webp'
], [
'site' => 'Mount Fanjing (梵净山)',
'description' => 'If you are in need of physical activity, try hiking your way up Mount Fanjing. Getting up there is truly breathtaking.',
'img' => '/assets/sightseeing/china/fanjing.webp'
], [
'site' => 'Shanghai (上海市)',
'description' => 'This one needs no introduction but remember: after you have finished visiting the modern city center, have a relaxing stroll in the old city of Shanghai.',
'img' => '/assets/sightseeing/china/shanghai.webp'
], [
'site' => 'The Great Wall (万里长城)',
'description' => 'Thousands of years of construction have resulted in one of the most recognizable sites in the entire world, spanning thousands of kilometers of mountain and desert.',
'img' => '/assets/sightseeing/china/great-wall.webp'
], [
'site' => 'Mount Heng (恆山)',
'description' => 'China is known for its famous sacred mountains and Mount Heng is certainly a reason. The hanging temple is a sight you will certainly never forget.',
'img' => '/assets/sightseeing/china/heng.webp'
], [
'site' => 'Shangri-La (སེམས་ཀྱི་ཉི་ཟླ་གྲོང་ཁྱེར།)',
'description' => 'Located in the Tibet province, it is no wonder this city was renamed after its Lost Horizon, literary counterpart.',
'img' => '/assets/sightseeing/china/shangri-la.webp'
],
],
'France' => [
[
'site' => 'Paris',
'description' => 'The capital of France is famous for its Eiffel Tower, multiple museums and its other monuments, most of which were built in the 1800\'s. And do not forget Versailles, less than 1h away.',
'img' => '/assets/sightseeing/france/grand-palais.webp'
], [
'site' => 'Rouen',
'description' => 'Home to the highest cathedral of France and death place of Joan of Arc, Rouen is the city with 100 bell towers since Medieval times.',
'img' => '/assets/sightseeing/france/gros-horloge.webp'
], [
'site' => 'Arles',
'description' => 'Dive back to the time of the Roman Empire in Arles, sitting in the middle of Camargues. Come see the bullfights or the corridas in its famous amphitheater.',
'img' => '/assets/sightseeing/france/arles.jpg'
], [
'site' => 'Beaune',
'description' => 'Enjoy a visit of the capital of Burgundy wine, and explore the famous Hôtel-Dieu, Hospices of Beaune founded in 1443.',
'img' => '/assets/sightseeing/france/beaune.jpg'
], [
'site' => 'Carcassone',
'description' => 'The fortified city of Carcassone dates back from 3500 BC. Enjoy a walk on its walls and explore its narrow pedestrian streets.',
'img' => '/assets/sightseeing/france/carcassone.webp'
], [
'site' => 'Mont-Saint-Michel',
'description' => 'Enjoy a walk on the plains around the city between 2 high tides before entering the Mont-Saint-Michel, one of France\'s most recognizable places, like Christian pilgrims used to.',
'img' => '/assets/sightseeing/france/mont-saint-michel.webp'
]
],
'Italy' => [
[
'site' => 'Venice',
'description' => 'What you will see in Venice surely will strike as a display of power from one of the most prosperous city of the world since the early Middle Ages.
But it is the no less interesting network of canals that makes it the obvious place for newly weds to travel to.',
'img' => '/assets/sightseeing/italy/venice.webp'
], [
'site' => 'Florence',
'description' => 'Visit Florence and be amazed by its enormous artistic heritage in architecture, painting and sculpture. Definitely a highlight for any trip to Italy.',
'img' => '/assets/sightseeing/italy/florence.webp'
], [
'site' => 'Pompeii',
'description' => 'Go back in time to the late October of 79 AD and see the once busy streets of Pompeii almost identical to how they were when the city was bustling with inhabitants and visitors. It is still so vivid there is no helping picturing how people used to live before the city\'s destruction.',
'img' => '/assets/sightseeing/italy/pompeii.webp'
]
],
'Japan' => [
[
'site' => 'Kyoto (京都)',
'description' => 'You will never manage to see all the temples, gardens and museums of Kyoto. All the more reason to visit!',
'img' => '/assets/sightseeing/japan/kyoto.webp'
], [
'site' => 'Miyajima (宮島)',
'description' => 'A short trip from Hiroshima gets you to the island of Miyajima, most famous for its giant Torii gate.',
'img' => '/assets/sightseeing/japan/miyajima.webp'
], [
'site' => 'Tokyo (東京)',
'description' => 'So much happens every day in the archetypal modern city of Japan. Stroll in the electronic district of Akihabara or visit the older monuments and museums, your choice.',
'img' => '/assets/sightseeing/japan/tokyo.webp'
], [
'site' => 'Nara (奈良市)',
'description' => 'Just a short distance from Osaka, Nara was the capital of japan for a short period and remains one of the most beautiful place to stroll through.',
'img' => '/assets/sightseeing/japan/nara.webp'
], [
'site' => 'Mount Fuji (富士山)',
'description' => 'The iconic landmark of Japan, there is no mountain as recognizable as Mount Fuji.',
'img' => '/assets/sightseeing/japan/fuji.webp'
]
],
'Spain' => [
[
'site' => 'Alhambra',
'description' => 'Certainly a breathtaking mix of art and engineering, the Alhambra palace dominates its surrounding and is only one of the many things you will find in Granada.',
'img' => '/assets/sightseeing/spain/alhambra.webp'
], [
'site' => 'Barcelona',
'description' => 'Fill yourself with the energy of Barcelona, one of the most visited city in Europe, and for good reason where the weather and the food are close to perfect.',
'img' => '/assets/sightseeing/spain/sagrada-familia.webp'
]
],
'USA' => [
[
'site' => 'New York',
'description' => 'Broadway, Time Square, the Empire State building, the Statue of Liberty, Central Park, the Metropolitan ... you may know more names from Mahnathan alone than you know from your own hometown. Everyone should plan to see New York and die.',
'img' => '/assets/sightseeing/usa/new-york.webp'
], [
'site' => 'San Francisco',
'description' => 'The city of love has a rich collection of monuments including the Golden Gate bridge, Lombard street but also gardens and museums.',
'img' => '/assets/sightseeing/usa/san-francisco.webp'
], [
'site' => 'Yellowstone National Park',
'description' => 'Nature is at its finest with the Yellowstone National park. You will not believe nature produces these colors.',
'img' => '/assets/sightseeing/usa/yellowstone.webp'
], [
'site' => 'Grand Canyon',
'description' => '5 to 6 million years for nature to dig into billions of years of mineral deposit, the Grand Canyon sure took its time to form, but is now among the few sites actually visible from space.',
'img' => '/assets/sightseeing/usa/grand-canyon.webp'
]
],
];