Class: Shadcn::CarouselComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/carousel_component.rb

Overview

Carousel component for sliding content Matches shadcn/ui Carousel component Uses Stimulus for interactivity with swipe and keyboard navigation

Examples:

Basic carousel

<%= render Shadcn::CarouselComponent.new do |carousel| %>
  <% carousel.with_slides do |slides| %>
    <% 5.times do |i| %>
      <% slides.with_item do %>
        <div class="p-6 text-center">Slide <%= i + 1 %></div>
      <% end %>
    <% end %>
  <% end %>
  <% carousel.with_previous { "Previous" } %>
  <% carousel.with_next { "Next" } %>
<% end %>

Vertical carousel

<%= render Shadcn::CarouselComponent.new(orientation: :vertical) do |carousel| %>
  <% carousel.with_slides do |slides| %>
    <% 5.times do |i| %>
      <% slides.with_item do %>
        <div class="p-6 text-center">Slide <%= i + 1 %></div>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Constant Summary collapse

ORIENTATIONS = 
{
  horizontal: "horizontal",
  vertical: "vertical"
}.freeze

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(orientation: :horizontal, loop: false, autoplay: false, autoplay_interval: 4000, align: :start, **options) ⇒ CarouselComponent

Returns a new instance of CarouselComponent.

Parameters:

  • orientation (Symbol) (defaults to: :horizontal) —

    Direction of carousel (:horizontal, :vertical)

  • loop (Boolean) (defaults to: false) —

    Whether to loop infinitely

  • autoplay (Boolean) (defaults to: false) —

    Whether to auto-advance slides

  • autoplay_interval (Integer) (defaults to: 4000) —

    Milliseconds between auto-advance (default: 4000)

  • align (Symbol) (defaults to: :start) —

    Item alignment (:start, :center, :end)



53
54
55
56
57
58
59
60
 
# File 'app/components/shadcn/carousel_component.rb', line 53

def initialize(orientation: :horizontal, loop: false, autoplay: false, autoplay_interval: 4000, align: :start, **options)
  super(**options)
  @orientation = orientation.to_sym
  @loop = loop
  @autoplay = autoplay
  @autoplay_interval = autoplay_interval
  @align = align.to_sym
end

Instance Method Details

#call ⇒ Object 



62
63
64
 
# File 'app/components/shadcn/carousel_component.rb', line 62

def call
  content_tag(:div, carousel_content, carousel_attributes)
end