SusCarousel

Slide pager — arrows, delimiters, and Items + index Model.

Package

SusKit · Molecules (commercial)

Open in Playground

SusKit · Molecules

Props

Name	Type	Default
Model	Prop<int>	0	v-model
ShowArrows	Prop<bool>	true	v-model
ShowDelimiters	Prop<bool>	true	v-model
Cycle	Prop<bool>	true	v-model
Disabled	Prop<bool>	false	v-model

Slots

No slots.

Events

Name	Field	Payload
Change	OnChange	int

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-carousel
• sus-carousel__arrow
• sus-carousel__arrow--next
• sus-carousel__arrow--prev
• sus-carousel__art
• sus-carousel__art-scrim
• sus-carousel__art-text
• sus-carousel__dot
• sus-carousel__dot--active
• sus-carousel__dots
• sus-carousel__slide
• sus-carousel__slide--active
• sus-carousel__slide--art
• sus-carousel__slide--danger
• sus-carousel__slide--info
• sus-carousel__slide--primary
• sus-carousel__slide--secondary
• sus-carousel__slide--success
• sus-carousel__slide--warning
• sus-carousel__subtitle
• sus-carousel__title
• sus-carousel__viewport
• sus-carousel--disabled
• sus-carousel--show-arrows

Usage

Items are set in code (List<CarouselItem>). Each slide carries Title, optional Subtitle / Color.

var carousel = new SusCarousel();
carousel.Items.Value = new List<SusCarousel.CarouselItem>
{
    new() { Title = "Knight", Subtitle = "Starter skin", Color = "primary" },
    new() { Title = "Mage", Subtitle = "Arcane set", Color = "info" },
    new() { Title = "Rogue", Subtitle = "Shadow set", Color = "success" },
};
carousel.Model.Value = 0;
carousel.ShowArrows.Value = true;
carousel.ShowDelimiters.Value = true;
carousel.Cycle.Value = true;
carousel.OnChange += index => { /* … */ };

<template>
  <sus:SusCarousel :Model="Slide.Value"
                   :ShowArrows="ShowArrows.Value"
                   :Cycle="Cycle.Value"
                   @change="OnSlide" />
</template>

<script>
public Prop<int> Slide = new(0);
public Prop<bool> ShowArrows = new(true);
public Prop<bool> Cycle = new(true);
void OnSlide(int index) { Slide.Value = index; }
// Populate Items in code.
</script>

Prop	Role
Items	List<CarouselItem> — slides
Model	Active slide index
ShowArrows / ShowDelimiters	Chrome
Cycle	Wrap from last → first