Hakumi :: Rails ViewComponents

Basic

Basic usage.

Slide 1

Basic slide content 1

Code

<%= render Hakumi::Carousel::Component.new do |carousel| %>
  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Slide 1") do %>
      Basic slide content 1
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Slide 2") do %>
      Basic slide content 2
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Slide 3") do %>
      Basic slide content 3
    <% end %>
  <% end %>
<% end %>

Position

There are 4 position options available.

Top dots 1

Content 1

Bottom dots 1

Content 1

Start dots 1

Content 1

End dots 1

Content 1

Code

<%= render Hakumi::Space::Component.new(direction: :vertical) do %>
  <%= render Hakumi::Carousel::Component.new(dot_placement: :top) do |carousel| %>
    <% carousel.with_slide do %>
      <%= render Hakumi::Card::Component.new(title: "Top dots 1") do %>
        Content 1
      <% end %>
    <% end %>
    <% carousel.with_slide do %>
      <%= render Hakumi::Card::Component.new(title: "Top dots 2") do %>
        Content 2
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Carousel::Component.new(dot_placement: :bottom) do |carousel| %>
    <% carousel.with_slide do %>
      <%= render Hakumi::Card::Component.new(title: "Bottom dots 1") do %>
        Content 1
      <% end %>
    <% end %>
    <% carousel.with_slide do %>
      <%= render Hakumi::Card::Component.new(title: "Bottom dots 2") do %>
        Content 2
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Carousel::Component.new(dot_placement: :start) do |carousel| %>
    <% carousel.with_slide do %>
      <%= render Hakumi::Card::Component.new(title: "Start dots 1") do %>
        Content 1
      <% end %>
    <% end %>
    <% carousel.with_slide do %>
      <%= render Hakumi::Card::Component.new(title: "Start dots 2") do %>
        Content 2
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Carousel::Component.new(dot_placement: :end) do |carousel| %>
    <% carousel.with_slide do %>
      <%= render Hakumi::Card::Component.new(title: "End dots 1") do %>
        Content 1
      <% end %>
    <% end %>
    <% carousel.with_slide do %>
      <%= render Hakumi::Card::Component.new(title: "End dots 2") do %>
        Content 2
      <% end %>
    <% end %>
  <% end %>
<% end %>

Scroll automatically

Timing of scrolling to the next card/picture.

Autoplay 1

This slide will automatically advance.

Code

<%= render Hakumi::Carousel::Component.new(autoplay: true, autoplay_speed: 2000) do |carousel| %>
  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Autoplay 1") do %>
      This slide will automatically advance.
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Autoplay 2") do %>
      Autoplay slide 2.
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Autoplay 3") do %>
      Autoplay slide 3.
    <% end %>
  <% end %>
<% end %>

Fade in

Slides use fade for transition.

Fade 1

Fade transition slide 1.

Code

<%= render Hakumi::Carousel::Component.new(effect: :fade) do |carousel| %>
  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Fade 1") do %>
      Fade transition slide 1.
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Fade 2") do %>
      Fade transition slide 2.
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Fade 3") do %>
      Fade transition slide 3.
    <% end %>
  <% end %>
<% end %>

Arrows for switching

Show the arrows for switching.

First slide

Arrows enabled, non-infinite carousel.

Code

<%= render Hakumi::Carousel::Component.new(arrows: true, infinite: false) do |carousel| %>
  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "First slide") do %>
      Arrows enabled, non-infinite carousel.
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Middle slide") do %>
      Try navigating with arrows.
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Last slide") do %>
      At the end, next arrow becomes disabled.
    <% end %>
  <% end %>
<% end %>

Progress of dots

Show progress of dots.

Progress 1

Dot below shows remaining time.

Code

<%= render Hakumi::Carousel::Component.new(autoplay: { dot_duration: true }, autoplay_speed: 3000) do |carousel| %>
  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Progress 1") do %>
      Dot below shows remaining time.
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Progress 2") do %>
      Progress bar restarts on each slide.
    <% end %>
  <% end %>

  <% carousel.with_slide do %>
    <%= render Hakumi::Card::Component.new(title: "Progress 3") do %>
      Matches autoplay timing.
    <% end %>
  <% end %>
<% end %>

Carousel API

Prop	Type	Default	Description
`slides slot`	`Slot (with_slide)`	`-`	Slides content. Each slide is defined with with_slide.
`autoplay`	`Boolean or Hash`	`false`	Enable automatic slide switching. When Hash, supports dot_duration: true to show progress bar on dots.
`autoplay_speed`	`Integer`	`3000`	Delay between auto scrolls in milliseconds.
`dot_placement`	`Symbol`	`:bottom`	Position of the dots. Options: :top, :bottom, :start, :end.
`dots`	`Boolean or Hash`	`true`	Show indicator dots. When Hash, supports :class_name or :class for custom CSS class.
`dots_class`	`String`	`nil`	Additional CSS class for dots wrapper (shortcut when dots is Boolean).
`arrows`	`Boolean`	`false`	Show arrows for switching slides.
`adaptive_height`	`Boolean`	`false`	Automatically adapt container height to active slide.
`draggable`	`Boolean`	`false`	Allow dragging with pointer on desktop to switch slides.
`infinite`	`Boolean`	`true`	Loop around when reaching first/last slide.
`fade`	`Boolean`	`false`	Use fade transition between slides. Also implied when effect: :fade.
`effect`	`:scrollx or :fade`	`:scrollx`	Transition effect between slides.
`speed`	`Integer`	`500`	Animation speed in milliseconds.
`easing`	`String`	`"linear"`	CSS timing function for scroll transitions.
`wait_for_animate`	`Boolean`	`false`	When true, ignore navigation while animation is running.

JavaScript API (element.hakumiCarousel)

Prop	Type	Default	Description
`getCurrent()`	`Function`	`-`	Get current slide index (starting from 0).
`getSlideCount()`	`Function`	`-`	Get total number of slides.
`next()`	`Function`	`-`	Go to next slide (respects infinite option).
`prev()`	`Function`	`-`	Go to previous slide (respects infinite option).
`goTo(index, dontAnimate = false)`	`Function`	`-`	Go to slide by index. When dontAnimate is true, jump without animation.

Events

Prop	Type	Default	Description
`hakumi--carousel:before_change`	`CustomEvent`	`-`	Triggered before slide changes. Detail: { current, next }.
`hakumi--carousel:after_change`	`CustomEvent`	`-`	Triggered after slide changed. Detail: { current, previous }.