Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<div role="region" aria-label="Carousel" style="--carousel-gap: 0rem" data-controller="midwest-carousel" data-midwest-carousel-fade-value="true" class="midwest-carousel">
  <div class="midwest-carousel-viewport">
    <div class="midwest-carousel-track"
         data-midwest-carousel-target="track"
         data-action="scroll->midwest-carousel#scrolled scrollend->midwest-carousel#scrolled">
      <div class="midwest-slide" style="--slide-width: 100%">
        <div class="theme-blue h-64 flex items-center justify-center rounded-lg bg-theme-2">
          <p class="text-theme-9 text-xl font-bold">Slide 1</p>
        </div>
      </div>
      <div class="midwest-slide" style="--slide-width: 100%">
        <div class="theme-green h-64 flex items-center justify-center rounded-lg bg-theme-2">
          <p class="text-theme-9 text-xl font-bold">Slide 2</p>
        </div>
      </div>
      <div class="midwest-slide" style="--slide-width: 100%">
        <div class="theme-red h-64 flex items-center justify-center rounded-lg bg-theme-2">
          <p class="text-theme-9 text-xl font-bold">Slide 3</p>
        </div>
      </div>
    </div>
    <button type="button"
              class="midwest-carousel-nav prev hide"
              aria-label="Previous slide"
              data-action="click->midwest-carousel#previous"
      data-midwest-carousel-target="prev"
      disabled>
      <div class="midwest-icon " aria-hidden="true">
        <div class="midwest-icon-inner">
          <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron back"><title>Chevron back</title>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M328 112L184 256l144 144"></path></svg>
        </div>
      </div>
    </button>
    <button type="button"
              class="midwest-carousel-nav next"
              aria-label="Next slide"
              data-action="click->midwest-carousel#next"
      data-midwest-carousel-target="next">
      <div class="midwest-icon " aria-hidden="true">
        <div class="midwest-icon-inner">
          <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron forward"><title>Chevron forward</title>
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M184 112l144 144-144 144"></path></svg>
        </div>
      </div>
    </button>
  </div>
  <div class="midwest-carousel-pager">
    <button type="button"
                class="midwest-carousel-pager-dot"
                aria-label="Go to slide 1"
                data-action="click->midwest-carousel#goto"
      data-index="0"
      data-midwest-carousel-target="dot">
      1
    </button>
    <button type="button"
                class="midwest-carousel-pager-dot"
                aria-label="Go to slide 2"
                data-action="click->midwest-carousel#goto"
      data-index="1"
      data-midwest-carousel-target="dot">
      2
    </button>
    <button type="button"
                class="midwest-carousel-pager-dot"
                aria-label="Go to slide 3"
                data-action="click->midwest-carousel#goto"
      data-index="2"
      data-midwest-carousel-target="dot">
      3
    </button>
  </div>
  <p class="sr-only"
     aria-live="polite"
     aria-atomic="true"
     data-midwest-carousel-target="status"></p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%= midwest_carousel(fade: true, pager: true) do |c| %>
  <% c.with_slide do %>
    <div class="theme-blue h-64 flex items-center justify-center rounded-lg bg-theme-2">
      <p class="text-theme-9 text-xl font-bold">Slide 1</p>
    </div>
  <% end %>
  <% c.with_slide do %>
    <div class="theme-green h-64 flex items-center justify-center rounded-lg bg-theme-2">
      <p class="text-theme-9 text-xl font-bold">Slide 2</p>
    </div>
  <% end %>
  <% c.with_slide do %>
    <div class="theme-red h-64 flex items-center justify-center rounded-lg bg-theme-2">
      <p class="text-theme-9 text-xl font-bold">Slide 3</p>
    </div>
  <% end %>
<% end %>

Fade

Cross-dissolve transition instead of the default horizontal slide. All slides stack in place; only the active slide is visible. Works with pager dots, autoplay, and loop.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Carousel/fade

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."