Carousel

Um carrossel de slides com controles anterior/próximo e navegação por setas.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add carousel --yes

O item carousel do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/carousel_component.rb
app/components/ui/carousel/content_component.rb
app/components/ui/carousel/item_component.rb
app/components/ui/carousel/previous_component.rb
app/components/ui/carousel/next_component.rb
app/helpers/ui/carousel_helper.rb
app/javascript/controllers/ui_carousel_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_carousel do %>
  <%= ui_carousel_content do %>
    <%= ui_carousel_item { "Slide 1" } %>
    <%= ui_carousel_item { "Slide 2" } %>
  <% end %>
  <%= ui_carousel_previous %>
  <%= ui_carousel_next %>
<% end %>

Exemplos

Padrão

Cinco slides numerados com controles.

<%= ui_carousel(class: "mx-12 w-full max-w-xs") do %>
  <%= ui_carousel_content do %>
    <% (1..5).each do |n| %>
      <%= ui_carousel_item(class: "p-1") do %>
        <div class="flex aspect-square items-center justify-center rounded-md border bg-card text-4xl font-semibold"><%= n %></div>
      <% end %>
    <% end %>
  <% end %>

<%= ui_carousel(class: "mx-12 w-full max-w-xs") do %>
  <%= ui_carousel_content do %>
    <% (1..5).each do |n| %>
      <%= ui_carousel_item(class: "p-1") do %>
        <div class="flex aspect-square items-center justify-center rounded-md border bg-card text-4xl font-semibold"><%= n %></div>
      <% end %>
    <% end %>
  <% end %>
  <%= ui_carousel_previous %>
  <%= ui_carousel_next %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Carousel`	`orientation`	`:horizontal`	`:horizontal` ou `:vertical`; passe o mesmo valor ao `ui_carousel_content`.
`Carousel::Content`	`orientation`	`:horizontal`	O `orientation:` do carrossel, repetido.