Breaking News: Grepper is joining You.com. Read the official announcement!

vue 3 custom carousel component

Clear Cockroach answered on January 28, 2024 Popularity 7/10 Helpfulness 2/10

answer vue 3 custom carousel component

vue 3 custom carousel component

Comment

<template>
  <div class="carousel">
    <div class="carousel-inner">
      <div v-for="(item, index) in visibleItems" :key="index" class="carousel-item">
        <!-- Your carousel item content -->
        <div>{{ item }}</div>
      </div>
    </div>
    <button @click="prev" class="btn-prev">Previous</button>
    <button @click="next" class="btn-next">Next</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  name: 'Carousel',
  setup() {
    const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // Sample items
    const pageSize = 3; // Number of items visible at a time
    const currentPage = ref(0);

    const visibleItems = computed(() => {
      const startIndex = currentPage.value * pageSize;
      return items.value.slice(startIndex, startIndex + pageSize);
    });

    const next = () => {
      if (currentPage.value < Math.ceil(items.value.length / pageSize) - 1) {
        currentPage.value++;
      }
    };

    const prev = () => {
      if (currentPage.value > 0) {
        currentPage.value--;
      }
    };

    return { visibleItems, next, prev };
  }
};
</script>

<style scoped>
.carousel {
  position: relative;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
}

.carousel-item {
  flex: 0 0 auto;
}

.btn-prev,
.btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 16px;
  border: 1px solid #333;
  background-color: #fff;
  cursor: pointer;
}

.btn-prev {
  left: 0;
}

.btn-next {
  right: 0;
}
</style>

Popularity 7/10 Helpfulness 2/10 Language html

Source: chat.openai.com

Tags: carousel html

Link to this answer
Share Copy Link

Contributed on Jan 28 2024

Clear Cockroach

0 Answers Avg Quality 2/10

vue 3 custom carousel component

Contents

More Related Answers

vue 3 custom carousel component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.