Getting Started
Components

Carousel

Description

Create interactive slideshow presentations for displaying and navigating through multiple images or content items.

FREE
This component is available for free. It implements the Bootstrap Carousel component. See the installation instructions below for more details.

Arguments

Name Default Type Description
id String Dom ID of the carousel component
html_attributes {} Hash Any attributes for the used html wrapper tag

Examples

Default 

<%= render Railsboot::CarouselComponent.new(id: "carouselExample") do |carousel| %>
  <% carousel.with_item(active: true) do %>
    <%= image_tag "https://placehold.co/600x400?text=Slide+1", class: "d-block w-100", alt: "Slide 1" %>
  <% end %>
  <% carousel.with_item do %>
    <%= image_tag "https://placehold.co/600x400?text=Slide+2", class: "d-block w-100", alt: "Slide 2" %>
  <% end %>
  <% carousel.with_item do %>
    <%= image_tag "https://placehold.co/600x400?text=Slide+3", class: "d-block w-100", alt: "Slide 3" %>
  <% end %>
<% end %>

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="Slide 1" src="https://placehold.co/600x400?text=Slide+1" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Slide 2" src="https://placehold.co/600x400?text=Slide+2" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Slide 3" src="https://placehold.co/600x400?text=Slide+3" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Slots

items Railsboot::Carousel::ItemComponent

Each item represent an individual slide of the carousel. The content of the item can be any arbitrary HTML code.

Name Default Type Description
active Boolean Define active state of the item.
html_attributes {} Hash Any attributes for the used html wrapper tag

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

  • A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
  • A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
  • The desired component itself (app/components/railsboot/carousel_component.rb).
  • A view template (app/components/railsboot/carousel_component.html.erb) for the component unless it's rendered inline.
  • Any other dependent components such as Slots (just if the component needs those)
  • Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
  • A test file for the components (test/components/railsboot/carousel_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Card Close Button