Carousels

API Docs

Carousels are great for showing off a lot of images!

Basic Carousel

You can use the Carousel component to display a collection of images.

Preview

Photo by Bailey Zindel on Unsplash

Photo by pine watt on Unsplash

Photo by Ken Cheung on Unsplash

Photo by Ales Krivec on Unsplash

three brown wooden boat on blue lake water taken at daytime

Photo by Pietro De Grandi on Unsplash

Photo by Luca Bravo on Unsplash

brown wooden dock between lavender flower field near body of water during golden hour

Photo by Mark Harpur on Unsplash

landscape photography mountain range with snow

Photo by Ryan Schroeder on Unsplash

Photo by Daniela Cuevas on Unsplash

Photo by Jeremy Bishop on Unsplash

Code

- 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"

Made with by Profoundry .