Carousel

<%= rui_carousel(id: "my-first-carousel") do |c| %>
  <% c.with_slide(label: "Slide one") do %>
    <img src="https://picsum.photos/id/1015/1200/480" alt="" />
  <% end %>
  <% c.with_slide(label: "Slide two") do %>
    <img src="https://picsum.photos/id/1018/1200/480" alt="" />
  <% end %>
<% end %>

<%= rui_carousel(id: "quickstart-carousel") do |c| %>
  <% c.with_slide(label: "Mountain") do %>
    <img src="https://picsum.photos/id/1015/1200/480"
         alt="Mountain landscape"
         class="w-full h-[320px] object-cover"
         loading="lazy" />
  <% end %>
  <% c.with_slide(label: "Forest") do %>
    <img src="https://picsum.photos/id/1018/1200/480"
         alt="Forest clearing"
         class="w-full h-[320px] object-cover"
         loading="lazy" />
  <% end %>
  <% c.with_slide(label: "Coastline") do %>
    <img src="https://picsum.photos/id/1043/1200/480"
         alt="Coastline aerial"
         class="w-full h-[320px] object-cover"
         loading="lazy" />
  <% end %>
<% end %>

<%= rui_carousel(id: "promo", variant: :default) do |c| %>
  <% c.with_slide(label: "Aerial pasture") do %>
    <img src="..." class="w-full h-[360px] object-cover" loading="lazy" />
  <% end %>
  <% # more slides %>
<% end %>

<%= rui_carousel(id: "promo", variant: :banner, auto_rotate: true, interval: 5000) do |c| %>
  <% c.with_slide(label: "Spring Yarding") do %>
    <div class="relative">
      <img src="..." class="w-full h-[360px] object-cover" loading="lazy" />
      <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent"></div>
      <div class="absolute bottom-8 left-8 text-white max-w-md">
        <p class="text-sm font-medium opacity-80 mb-1">Featured event</p>
        <h3 class="text-2xl font-bold">Spring Yarding 2026</h3>
      </div>
    </div>
  <% end %>
<% end %>

<%= rui_carousel(id: "hero", variant: :hero) do |c| %>
  <% c.with_slide(label: "Premium genetics") do %>
    <div class="relative h-[600px]">
      <img src="..." class="w-full h-full object-cover" loading="eager" />
      <div class="absolute inset-0 bg-black/40"></div>
      <div class="absolute inset-0 flex items-center justify-center text-center text-white px-8">
        <div>
          <h1 class="text-5xl font-bold">Premium genetics</h1>
          <%= rui_button("Browse", color: :primary, size: :lg, class: "mt-6") %>
        </div>
      </div>
    </div>
  <% end %>
<% end %>

<%= rui_carousel(id: "products", variant: :cards,
                 items_per_view: { base: 1, sm: 2, lg: 4 }) do |c| %>
  <% @products.each do |p| %>
    <% c.with_slide(label: p.name) do %>
      <%= render p %>
    <% end %>
  <% end %>
<% end %>

<%= rui_carousel(id: "quotes", variant: :testimonials, color: :emerald) do |c| %>
  <% @testimonials.each do |t| %>
    <% c.with_slide(label: t.author) do %>
      <article class="p-6 bg-white dark:bg-zinc-900 rounded-xl border h-full">
        <p>&ldquo;<%= t.body %>&rdquo;</p>
        <p class="mt-4 font-medium"><%= t.author %></p>
      </article>
    <% end %>
  <% end %>
<% end %>

<%= rui_carousel(id: "splash", variant: :fullscreen, loop: false) do |c| %>
  <% c.with_slide { render "splash/intro" } %>
  <% c.with_slide { render "splash/features" } %>
  <% c.with_slide { render "splash/cta" } %>
<% end %>

<%= rui_carousel(id: "labelled") do |c| %>
  <% c.with_slide(label: "Mountain view") do %>
    <img src="..." alt="" />
  <% end %>
  <% c.with_slide(label: "Forest clearing") do %>
    <img src="..." alt="" />
  <% end %>
<% end %>

<%= rui_carousel(id: "mixed-content") do |c| %>
  <% c.with_slide do %>
    <%= image_tag "hero.jpg", class: "w-full" %>
  <% end %>
  <% c.with_slide do %>
    <%= render "shared/feature_card", feature: @feature %>
  <% end %>
  <% c.with_slide do %>
    <%= turbo_frame_tag dom_id(@latest_post), src: post_path(@latest_post) %>
  <% end %>
<% end %>

<%# Off (default) %>
<%= rui_carousel(id: "off") do |c| ... end %>

<%# Every 3 seconds %>
<%= rui_carousel(id: "every-3s", auto_rotate: true, interval: 3000) do |c| ... end %>

<%# Every 6 seconds %>
<%= rui_carousel(id: "every-6s", auto_rotate: true, interval: 6000) do |c| ... end %>

<%= rui_carousel(id: "always-rotating",
                 auto_rotate: true,
                 interval: 4000,
                 pause_on_hover: false) do |c| %>
  <% # slides %>
<% end %>

<%# Default: honour the user's OS setting %>
<%= rui_carousel(id: "respectful", auto_rotate: true) do |c| ... end %>

<%# Force rotation even when the user asked for less motion %>
<%= rui_carousel(id: "ignores-pref",
                 auto_rotate: true,
                 respect_reduced_motion: false) do |c| ... end %>

<%= rui_carousel(id: "arrows-only", show_indicators: false) do |c| ... end %>

<%= rui_carousel(id: "indicators-only", show_arrows: false) do |c| ... end %>

<%= rui_carousel(id: "arrows-outside", arrow_position: :outside) do |c| ... end %>

<%= rui_carousel(id: "overlay-bottom",
                 indicator_position: :overlay_bottom) do |c| ... end %>

<%= rui_carousel(id: "ambient",
                 auto_rotate: true,
                 interval: 4500,
                 show_arrows: false,
                 show_indicators: false) do |c| %>
  <% # slides %>
<% end %>

<%# Default: wrap at boundaries %>
<%= rui_carousel(id: "wraps", loop: true) do |c| ... end %>

<%# Clamp at boundaries; arrows disable at the ends %>
<%= rui_carousel(id: "clamped", loop: false) do |c| ... end %>

<%= rui_carousel(id: "two-up", variant: :cards, items_per_view: 2) do |c| %>
  <% # always 2-up, regardless of viewport %>
<% end %>

<%= rui_carousel(id: "responsive",
                 variant: :cards,
                 items_per_view: { base: 1, sm: 2, md: 3, lg: 4 }) do |c| %>
  <% # slide count adapts to viewport width %>
<% end %>

<%# Semantic %>
<%= rui_carousel(id: "primary", color: :primary) do |c| ... end %>
<%= rui_carousel(id: "success", color: :success) do |c| ... end %>

<%# Tailwind palette %>
<%= rui_carousel(id: "rose", color: :rose) do |c| ... end %>
<%= rui_carousel(id: "emerald", color: :emerald) do |c| ... end %>
<%= rui_carousel(id: "indigo", color: :indigo) do |c| ... end %>

<%= rui_carousel(id: "small", size: :sm) do |c| ... end %>
<%= rui_carousel(id: "base", size: :base) do |c| ... end %>
<%= rui_carousel(id: "large", size: :lg) do |c| ... end %>

<%= rui_carousel(id: "sharp", shape: :none) do |c| ... end %>
<%= rui_carousel(id: "default", shape: :rounded) do |c| ... end %>
<%= rui_carousel(id: "square", shape: :square) do |c| ... end %>
<%= rui_carousel(id: "pill", shape: :pill) do |c| ... end %>

<%= rui_carousel(id: "remote-controlled") do |c| %>
  <% c.with_slide(label: "One") do %>...<% end %>
  <% c.with_slide(label: "Two") do %>...<% end %>
  <% c.with_slide(label: "Three") do %>...<% end %>
<% end %>

<div class="mt-4 flex gap-2">
  <button data-action="click->carousel#prev"
          data-controller-element="#remote-controlled">
    Previous
  </button>
  <button data-action="click->carousel#goTo"
          data-carousel-index-param="2">
    Jump to slide 3
  </button>
  <button data-action="click->carousel#next">
    Next
  </button>
</div>

<%= rui_carousel(id: "lazy-cards", variant: :cards) do |c| %>
  <% @posts.each do |post| %>
    <% c.with_slide(label: post.title) do %>
      <%= turbo_frame_tag dom_id(post),
            src: post_path(post),
            loading: "lazy" %>
    <% end %>
  <% end %>
<% end %>

<%= rui_carousel(id: "hero", variant: :hero, auto_rotate: true) do |c| %>
  <% c.with_slide(label: "Catalogue") do %>
    <div class="relative h-[600px]">
      <img src="/hero.jpg" class="w-full h-full object-cover" loading="eager" />
      <div class="absolute inset-0 bg-gradient-to-r from-black/70 to-transparent"></div>
      <div class="absolute inset-0 flex items-center px-12">
        <div class="text-white">
          <h2 class="text-4xl font-bold">Browse the catalogue</h2>
          <%= rui_button("Open catalogue", color: :primary, size: :lg, class: "mt-4") %>
        </div>
      </div>
    </div>
  <% end %>
<% end %>

<%= rui_carousel(id: "quotes",
                 variant: :testimonials,
                 color: :indigo,
                 auto_rotate: true,
                 interval: 7000) do |c| %>
  <% @testimonials.each do |t| %>
    <% c.with_slide(label: t.author) do %>
      <article class="p-6 bg-white rounded-xl border h-full">
        <div class="flex items-center gap-3 mb-3">
          <%= image_tag t.avatar_url, class: "w-12 h-12 rounded-full" %>
          <div>
            <p class="font-medium"><%= t.author %></p>
            <p class="text-xs text-zinc-500"><%= t.role %></p>
          </div>
        </div>
        <p>&ldquo;<%= t.quote %>&rdquo;</p>
      </article>
    <% end %>
  <% end %>
<% end %>

<%= rui_carousel(id: "products",
                 variant: :cards,
                 items_per_view: { base: 1, md: 3 }) do |c| %>
  <% @products.each do |p| %>
    <% c.with_slide(label: p.name) do %>
      <%= render p %>
    <% end %>
  <% end %>
<% end %>