SliderGroup API Reference

Props

Prop	Type	Default	Description
arrowsPosition	String	'bottom'	Position of navigation arrows. Options: 'top', 'bottom', 'center', 'center-outside'
showArrowsAlways	Boolean	true	Whether to always show navigation arrows
showDots	Boolean	true	Whether to show dots navigation
items	Array	[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]	Array of items to display in the slider
canSelectCard	Boolean	true	Whether cards can be selected
selectedCard	Number	-1	Index of the currently selected card (-1 for none)
cardWidth	Number	20	Width of each card in rem units

Events

Event	Payload	Description
cardClick	Any	Emitted when a card is clicked, with the clicked item as payload

Slots

Slot	Props	Description
prev-slider-btn	{ disabled: Boolean, handlePrevBtnClick: Function }	Custom previous button content
next-slider-btn	{ disabled: Boolean, handleNextBtnClick: Function }	Custom next button content
dots	{ totalDots: Number, currentDot: Number, handleDotClick: Function }	Custom dots navigation content
card	{ item: Any, handleCardClick: Function, selectedCard: Boolean }	Custom card content
card-content	{ item: Any }	Custom content inside the default card

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <OSliderGroup
    :items="items"
    arrows-position="bottom"
    :show-dots="true"
    @card-click="handleCardClick"
  />
</template>

<script setup>
import { ref } from "vue";
import { OSliderGroup } from "your-component-library";

const items = ref([1, 2, 3, 4, 5]);
const handleCardClick = (item) => {
  console.log("Card clicked:", item);
};
</script>

With Custom Card Content

<template>
  <OSliderGroup :items="items">
    <template #card="{ item, handleCardClick, selectedCard }">
      <div
        class="custom-card"
        :class="{ selected: selectedCard }"
        @click="handleCardClick"
      >
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </template>
  </OSliderGroup>
</template>

<script setup>
import { ref } from "vue";
import { OSliderGroup } from "your-component-library";

const items = ref([
  { title: "Card 1", description: "Description 1" },
  { title: "Card 2", description: "Description 2" },
  { title: "Card 3", description: "Description 3" },
]);
</script>

With Custom Navigation

<template>
  <OSliderGroup :items="items">
    <template #prev-slider-btn="{ disabled, handlePrevBtnClick }">
      <button
        class="custom-prev-btn"
        :disabled="disabled"
        @click="handlePrevBtnClick"
      >
        Previous
      </button>
    </template>

    <template #next-slider-btn="{ disabled, handleNextBtnClick }">
      <button
        class="custom-next-btn"
        :disabled="disabled"
        @click="handleNextBtnClick"
      >
        Next
      </button>
    </template>
  </OSliderGroup>
</template>

<script setup>
import { ref } from "vue";
import { OSliderGroup } from "your-component-library";

const items = ref([1, 2, 3, 4, 5]);
</script>

Center Position with Custom Dots

<template>
  <OSliderGroup :items="items" arrows-position="center">
    <template #dots="{ totalDots, currentDot, handleDotClick }">
      <div class="custom-dots">
        <template v-for="dot in totalDots" :key="dot">
          <div
            class="custom-dot"
            :class="{ active: currentDot === dot }"
            @click="handleDotClick(dot)"
          />
        </template>
      </div>
    </template>
  </OSliderGroup>
</template>

<script setup>
import { ref } from "vue";
import { OSliderGroup } from "your-component-library";

const items = ref([1, 2, 3, 4, 5]);
</script>