LoopOS UI v1.1.26.2

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
<div class="lui-carousel_container lui-carousel_container--with-dots lui-carousel_container--with-preview" data-controller="lui--carousel-container">
  <section
    id="lui-loopos_ui/carousel-35ef7e672aaebebb"
    class="lui-carousel"
    data-controller="carousel"
    data-carousel-loop-value="true"
    data-carousel-dots-value="true">
    <div class="lui-carousel-viewport" data-carousel-target="viewport" style="height: 350px;
width: 350px;
">
      <div class="flex aspect-square" style="height: 350px;
width: 350px;
">
        <img class="lui-carousel-image" src="/assets/loopos-icon-7668bd7d.png" />
        <img class="lui-carousel-image" src="/image_proxy/2" />
        <img class="lui-carousel-image" src="/image_proxy/1" />
        <img class="lui-carousel-image" src="/image_proxy/1" />
        <img class="lui-carousel-image" src="/image_proxy/6" />
      </div>
      
      <div class="lui-carousel-dots" data-lui--carousel-container-target="dots">
        <div class="lui-carousel-dots-container" data-carousel-target="dotsContainer"></div>
      </div>
    </div>
  </section>
  <section 
    class="lui-carousel-preview" 
    data-lui--carousel-container-target="preview"
    data-controller="carousel"
    data-carousel-loop-value="false"
    data-carousel-drag-free-value="false"
    data-carousel-dots-value="false"
    data-carousel-buttons-value="false"
    data-carousel-thumbnails-value="true"
    data-carousel-main-carousel-value="lui-loopos_ui/carousel-35ef7e672aaebebb"
    >
    <div 
      class="overflow-hidden outline-hidden cursor-grab active:cursor-grabbing"
      data-carousel-target="viewport"
      style="width: 350px;
"
      >
      <div class="lui-carousel-thumbnails">
        <button class="flex-shrink-0 flex-grow-0 basis-1/4 aspect-square relative select-none outline-hidden" data-carousel-target="thumbnailButton">
          <div class="lui-carousel-thumbnails__image">
            <img class="aspect-square object-cover" src="/assets/loopos-icon-7668bd7d.png" />
          </div>
        </button>
        <button class="flex-shrink-0 flex-grow-0 basis-1/4 aspect-square relative select-none outline-hidden" data-carousel-target="thumbnailButton">
          <div class="lui-carousel-thumbnails__image">
            <img class="aspect-square object-cover" src="/image_proxy/2" />
          </div>
        </button>
        <button class="flex-shrink-0 flex-grow-0 basis-1/4 aspect-square relative select-none outline-hidden" data-carousel-target="thumbnailButton">
          <div class="lui-carousel-thumbnails__image">
            <img class="aspect-square object-cover" src="/image_proxy/1" />
          </div>
        </button>
        <button class="flex-shrink-0 flex-grow-0 basis-1/4 aspect-square relative select-none outline-hidden" data-carousel-target="thumbnailButton">
          <div class="lui-carousel-thumbnails__image">
            <img class="aspect-square object-cover" src="/image_proxy/1" />
          </div>
        </button>
        <button class="flex-shrink-0 flex-grow-0 basis-1/4 aspect-square relative select-none outline-hidden" data-carousel-target="thumbnailButton">
          <div class="lui-carousel-thumbnails__image">
            <img class="aspect-square object-cover" src="/image_proxy/6" />
          </div>
        </button>
      </div>
    </div>
  </section>
</div>

Carousel

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
<%= render LooposUi::Carousel.new(
    images: [
        "loopos-icon.png",
        random_image_src,
        random_image_src,
        random_image_src,
        random_image_src
    ].drop(5 - (preview_params.delete(:images_count) || 0).clamp(0, 5)),
    **preview_params
) %>

No notes provided.

Description

The LooposUi::Carousel component is used to display a collection of images in a horizontal scrollable carousel. The component provides an interactive image gallery with navigation controls including dots, keyboard navigation, and touch/drag support. It uses the Embla Carousel library for smooth scrolling and responsive behavior.

Arguments

Property Default Description
images An array of image URLs to display in the carousel.
width 350 The width of the carousel
height 350 The height of the carousel
with_dots true Render the dots controller
with_preview false Render a preview bellow the main carousel.
data {} Data atributes for the element

width and height will be inlined. They accept a string or number. If a number is passed, pixel unit is assumed.

The images will be rendered with object-fit: cover;

Events

Custom Events

The carousel container emits and listens for the following custom events:

Event Name Description Event Detail Example
togglePreview Toggles the preview section below the main carousel. { detail: { force: true/false } }
toggleDots Toggles the visibility of the navigation dots below the carousel. { detail: { force: true/false } }

You can force the open/closed state by passing in {detail: { force: Boolean }}

Usage Example:

To programmatically show or hide the preview or dots, dispatch a custom event on the carousel container element:

Examples:

element.dispatchEvent(new CustomEvent("togglePreview", { detail: { force: true}})) // Forces visible state
element.dispatchEvent(new CustomEvent("toggleDots")) // Will toggle