Class: Fluxbit::CarouselComponent

Inherits:
Component
  • Object
show all
Includes:
Fluxbit::Config::CarouselComponent
Defined in:
app/components/fluxbit/carousel_component.rb

Overview

The ‘Fluxbit::CarouselComponent` is a customizable carousel component that extends `Fluxbit::Component`. It allows you to create image carousels or content sliders with various features like automatic sliding, indicators, navigation controls, and customizable animations.

Examples:

Basic usage

= fx_carousel do |c|
  c.with_slide { image_tag("slide1.jpg") }
  c.with_slide { image_tag("slide2.jpg") }
  c.with_slide { image_tag("slide3.jpg") }
end

See Also:

  • For detailed documentation.

Instance Method Summary collapse

Methods inherited from Component

#add, #add_popover_or_tooltip, #anyicon, #element_name, #fx_id, #icon, #options, #popover?, #random_id, #remove_class, #remove_class_from_props, #render_popover_or_tooltip, #target, #tooltip?

Methods included from IconHelpers

#chevron_double_left, #chevron_double_right, #chevron_down, #chevron_left, #chevron_right, #chevron_up, #close_icon, #ellipsis_horizontal, #eye_icon, #eye_slash_icon, #plus_icon

Constructor Details

#initialize(**props) ⇒ Fluxbit::CarouselComponent

Initializes the carousel component with the given properties.

Parameters:

  • **props (Hash) —

    The properties to customize the component.

  • props (Hash) —

    a customizable set of options

Options Hash (**props):

  • :slide (Boolean) — default: true —

    Enables automatic sliding between items.

  • :slide_interval (Integer) — default: 3000 —

    Interval in milliseconds between automatic slides.

  • :indicators (Boolean) — default: true —

    Shows slide indicator dots at the bottom.

  • :controls (Boolean) — default: true —

    Shows previous/next navigation controls.

  • :left_control (String) — default: nil —

    Custom content/text for left control button.

  • :right_control (String) — default: nil —

    Custom content/text for right control button.

  • :remove_class (String) — default: '' —

    CSS classes to remove from the default class list.

  • **props (Hash) —

    Remaining options declared as HTML attributes.



41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
# File 'app/components/fluxbit/carousel_component.rb', line 41

def initialize(**props)
  super
  @props = props
  @slides_group = []

  @slide = options(@props.delete(:slide), default: @@slide)
  @slide_interval = options(@props.delete(:slide_interval), default: @@slide_interval)
  @indicators = options(@props.delete(:indicators), default: @@indicators)
  @controls = options(@props.delete(:controls), default: @@controls)
  @left_control = @props.delete(:left_control)
  @right_control = @props.delete(:right_control)

  declare_classes

  # Handle class removal
  @props[:class] = remove_class(@props.delete(:remove_class) || "", @props[:class])

  # Flowbite carousel data attributes
  @props[:data] ||= {}
  @props[:data][:carousel] = @slide ? "slide" : "static"
end

Instance Method Details

#call ⇒ Object 



63
64
65
66
67
68
69
70
71
 
# File 'app/components/fluxbit/carousel_component.rb', line 63

def call
  slides # Ensure slides are rendered

  tag.div(**@props) do
    concat(render_slides_container)
    concat(render_indicators) if @indicators
    concat(render_controls) if @controls
  end
end