Carousels are great for showing off a lot of images!
You can use the Carousel component to display a collection of images or other content.
- photos = Rails.cache.fetch("unsplash_landscapes") { Unsplash::Photo.search("landscape") }
- unsplash_link = "https://unsplash.com?#{Unsplash::Client.connection.utm_params.to_param}"
= daisy_carousel(css: "h-96 gap-x-2 rounded-lg") do |carousel|
- if photos.empty?
%p No photos found.
- photos.each do |photo|
- carousel.with_item(css: "relative") do
= link_to photo.links.html, target: "_blank" do
= image_tag(photo.urls.regular, alt: photo.alt_description, class: "rounded-lg h-96")
.absolute.bottom-2.left-0.right-0.flex.justify-center
%span.rounded.text-slate-600.px-2.py-1{ class: "bg-base-100/90" }
Photo by
= link_to photo.user.name, photo.user.links.html, class: "link hover:text-black", target: "_blank"
on
= link_to "Unsplash", unsplash_link, class: "link hover:text-black", target: "_blank"
The Carousel component can also be used to display other components, such as Cards. This is great for showcasing related content in a compact way.
Experience breathtaking views of pristine rivers winding through majestic peaks.
Witness the stunning beauty of endless desert landscapes under vast skies.
Explore winding paths through ancient forests filled with natural wonders.
Marvel at pristine beaches where turquoise waters meet golden sands.
Experience breathtaking views of pristine rivers winding through majestic peaks.
Witness the stunning beauty of endless desert landscapes under vast skies.
Explore winding paths through ancient forests filled with natural wonders.
Marvel at pristine beaches where turquoise waters meet golden sands.
= daisy_carousel(css: "h-96 gap-x-4 rounded-lg") do |carousel|
- carousel.with_item(css: "w-96") do
= daisy_card(css: "h-full bg-base-100 border border-base-200") do |card|
- card.with_top_figure(src: image_path("landscapes/mountain-river.jpg"))
- card.with_title { "Mountain River" }
%p{ class: "text-base-content/70" }
Experience breathtaking views of pristine rivers winding through majestic peaks.
- card.with_actions do
= daisy_button("Learn More")
- carousel.with_item(css: "w-96") do
= daisy_card(css: "h-full bg-base-100 border border-base-200") do |card|
- card.with_top_figure(src: image_path("landscapes/desert.jpg"))
- card.with_title { "Desert Vista" }
%p{ class: "text-base-content/70" }
Witness the stunning beauty of endless desert landscapes under vast skies.
- card.with_actions do
= daisy_button("Learn More")
- carousel.with_item(css: "w-96") do
= daisy_card(css: "h-full bg-base-100 border border-base-200") do |card|
- card.with_top_figure(src: image_path("landscapes/forest.jpg"))
- card.with_title { "Forest Path" }
%p{ class: "text-base-content/70" }
Explore winding paths through ancient forests filled with natural wonders.
- card.with_actions do
= daisy_button("Learn More")
- carousel.with_item(css: "w-96") do
= daisy_card(css: "h-full bg-base-100 border border-base-200") do |card|
- card.with_top_figure(src: image_path("landscapes/beach.jpg"))
- card.with_title { "Coastal Paradise" }
%p{ class: "text-base-content/70" }
Marvel at pristine beaches where turquoise waters meet golden sands.
- card.with_actions do
= daisy_button("Learn More")