Wirestrap is still in active development

This project is pre-1.0 and may introduce breaking changes at any time without prior notice.

Slider

Horizontal carousel with arrow navigation and a fixed column layout. Slides are defined as named slots. The component injects per-instance column styles via @push('styles'): add @stack('styles') inside <head> in your layout.

Items

Each slide is a named slot. The name is only used as a key.

Counter

Animated numeric display that transitions to a new target.

Accordion

Collapsible content panels with animated height transitions.

Tooltip

Floating tooltip that flips and shifts to stay within the viewport.

Toast

Programmatic notifications triggered from frontend or backend.

Alert

Programmatic dialogs and confirmation prompts.

Autocomplete

Text input with a suggestion dropdown and inline ghost text.

Table

Column headers niceties and bulk actions.

<x-wirestrap::slider id="products">
    <x-slot:item_1>
        <div class="card"> ... </div>
    </x-slot:item_1>
    <x-slot:item_2>
        <div class="card"> ... </div>
    </x-slot:item_2>
    <x-slot:item_3>
        <div class="card"> ... </div>
    </x-slot:item_3>
</x-wirestrap::slider>

Responsive columns

Set :columns for the base column count, then override at each breakpoint with :columns-sm, :columns-md, :columns-lg, and :columns-xl. The breakpoints match Bootstrap's: 576px, 768px, 992px, and 1200px. 

<x-wirestrap::slider
    id="products"
    :columns="1"
    :columns-md="2"
    :columns-lg="3"
>
    ...
</x-wirestrap::slider>

Scroll behavior

By default each arrow click advances by one slide. Set :scroll-by to advance by a fixed number, or use scroll-page to jump by the full number of visible columns at once.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

<x-wirestrap::slider id="gallery" scroll-page>
    ...
</x-wirestrap::slider>
<x-wirestrap::slider id="gallery" :scroll-by="2">
    ...
</x-wirestrap::slider>

External control

Enable events to expose the $wirestrap.slider magic helper for navigation and to receive ws-slider-change events on every position change. The event detail contains offset, canScrollPrev, and canScrollNext.

#1
#2
#3
#4 
{{-- Example of what you could do with external events --}}
<div x-data="{ offset: 0 }" x-on:ws-slider-change="offset = $event.detail.offset">
    <x-wirestrap::slider id="hero" :columns="1" :arrows="false" events>
        <x-slot:slide_1> ... </x-slot:slide_1>
        <x-slot:slide_2> ... </x-slot:slide_2>
        <x-slot:slide_3> ... </x-slot:slide_3>
    </x-wirestrap::slider>

    <button :disabled="offset === 0" x-on:click="$wirestrap.slider.first('hero')">«</button>
    <button :class="offset === 0 ? 'active' : ''" x-on:click="$wirestrap.slider.goTo('hero', 0)">●</button>
    <button :class="offset === 1 ? 'active' : ''" x-on:click="$wirestrap.slider.goTo('hero', 1)">●</button>
    <button :class="offset === 2 ? 'active' : ''" x-on:click="$wirestrap.slider.goTo('hero', 2)">●</button>
    <button :disabled="offset === 2" x-on:click="$wirestrap.slider.last('hero')">»</button>
</div>

Props

Global configuration

Most prop defaults can be overridden globally via config/wirestrap.php.

x-wirestrap::slider

Prop Type Default Description
id string|null null Element id. Required when strict mode is enabled.
columns int config Number of visible columns at the base breakpoint.
columns-sm int|null config Column override at ≥576px.
columns-md int|null config Column override at ≥768px.
columns-lg int|null config Column override at ≥992px.
columns-xl int|null config Column override at ≥1200px.
scroll-by int config Slides to advance per arrow click. Ignored when scroll-page is enabled.
scroll-page bool config Each arrow click advances by the full number of visible columns.
arrows bool config Show the built-in prev/next arrow buttons.
events bool config Enable the $wirestrap.slider magic helper and ws-slider-change events (detail: offset, canScrollPrev, canScrollNext).
No results found

$wirestrap.slider

Method Type Default Description
$wirestrap.slider.prev(id) -- -- Navigate back by the configured scroll-by step.
$wirestrap.slider.prev(id, step) -- -- Navigate back by step slides.
$wirestrap.slider.next(id) -- -- Navigate forward by the configured scroll-by step.
$wirestrap.slider.next(id, step) -- -- Navigate forward by step slides.
$wirestrap.slider.goTo(id, index) -- -- Jump to a slide offset (0-based).
$wirestrap.slider.first(id) -- -- Jump to the first slide.
$wirestrap.slider.last(id) -- -- Jump to the last slide.
No results found
⭐ GitHub