SliderGroup Component Demo

This page demonstrates the SliderGroup component with various configurations and examples.

Basic SliderGroup

A simple slider with default configuration.

Code Example

<template>
  <OSliderGroup :items="items" @card-click="handleCardClick" />
</template>

<script setup>
import { ref } from "vue";

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

Demo

1

2

3

4

5

Arrow Positions

SliderGroup with different arrow positions.

Code Example

<template>
  <div class="arrow-position-demo">
    <h3>Top Position</h3>
    <OSliderGroup :items="items" arrows-position="top" />

    <h3>Bottom Position (Default)</h3>
    <OSliderGroup :items="items" arrows-position="bottom" />

    <h3>Center Position</h3>
    <OSliderGroup :items="items" arrows-position="center" />

    <h3>Center Outside Position</h3>
    <OSliderGroup :items="items" arrows-position="center-outside" />
  </div>
</template>

<script setup>
import { ref } from "vue";

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

<style>
.arrow-position-demo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.arrow-position-demo h3 {
  margin-bottom: 1rem;
}
</style>

Demo

Top Position

1

2

3

4

5

Bottom Position (Default)

1

2

3

4

5

Center Position

1

2

3

4

5

Center Outside Position

1

2

3

4

5

Custom Card Content

SliderGroup with custom card content.

Code Example

<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 class="card-footer">
          <span class="price">${{ item.price }}</span>
          <button class="action-btn">View Details</button>
        </div>
      </div>
    </template>
  </OSliderGroup>
</template>

<script setup>
import { ref } from "vue";

const items = ref([
  {
    title: "Product 1",
    description: "Description for product 1",
    price: 99.99,
  },
  {
    title: "Product 2",
    description: "Description for product 2",
    price: 149.99,
  },
  {
    title: "Product 3",
    description: "Description for product 3",
    price: 199.99,
  },
  {
    title: "Product 4",
    description: "Description for product 4",
    price: 249.99,
  },
  {
    title: "Product 5",
    description: "Description for product 5",
    price: 299.99,
  },
]);
</script>

<style>
.custom-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.custom-card.selected {
  border: 1px solid #4a90e2;
}

.custom-card h3 {
  margin: 0 0 0.25rem 0;
  color: #333;
}

.custom-card p {
  margin: 0 0 1rem 0;
  color: #666;
  width: 100%;
  word-break: break-word;
  min-width: 12rem;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 0.75rem;
  font-weight: bold;
  color: #4a90e2;
}

.action-btn {
  padding: 0.25rem 0.5rem;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 0.5rem;
}

.action-btn:hover {
  background: #357abd;
}
</style>

Demo

Product 1

Description for product 1

$99.99

Product 2

Description for product 2

$149.99

Product 3

Description for product 3

$199.99

Product 4

Description for product 4

$249.99

Product 5

Description for product 5

$299.99

Custom Navigation

SliderGroup with custom navigation buttons and dots.

Code Example

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

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

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

<script setup>
import { ref } from "vue";

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

<style>
.custom-nav-btn {
  padding: 0.5rem 1rem;
  background: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-nav-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.custom-nav-btn:not(:disabled):hover {
  background: #357abd;
}

.custom-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}

.custom-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
}

.custom-dot.active {
  background: #4a90e2;
  transform: scale(1.2);
}
</style>

Demo

1

2

3

4

5

Card Selection

SliderGroup with card selection functionality.

Code Example

<template>
  <div class="selection-demo">
    <OSliderGroup
      :items="items"
      :can-select-card="true"
      :selected-card="selectedCard"
      @card-click="handleCardClick"
    />

    <div class="selection-info">
      Selected Card: {{ selectedCard === -1 ? "None" : `Card ${selectedCard}` }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const items = ref([1, 2, 3, 4, 5]);
const selectedCard = ref(-1);

const handleCardClick = (item) => {
  selectedCard.value = items.value.indexOf(item) + 1;
};
</script>

<style>
.selection-demo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.selection-info {
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
  text-align: center;
}
</style>

Demo

1

2

3

4

5

Selected Card: None

Responsive Behavior

SliderGroup with different card widths to demonstrate responsive behavior.

Code Example

<template>
  <div class="responsive-demo">
    <h3>Default Width (20rem)</h3>
    <OSliderGroup :items="items" />

    <h3>Smaller Width (15rem)</h3>
    <OSliderGroup :items="items" :card-width="15" />

    <h3>Larger Width (25rem)</h3>
    <OSliderGroup :items="items" :card-width="25" />
  </div>
</template>

<script setup>
import { ref } from "vue";

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

<style>
.responsive-demo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.responsive-demo h3 {
  margin-bottom: 1rem;
}
</style>

Demo

Default Width (20rem)

1

2

3

4

5

Smaller Width (15rem)

1

2

3

4

5

Larger Width (25rem)

1

2

3

4

5