Vue Responsive Horizontal Scrolling Card Slider

Introduction

A card slider is an essential UI component that showcases multiple items within a confined space, commonly used in various applications like e-commerce platforms, portfolios, or content displays. In this tutorial, we'll create a responsive horizontal scrolling card slider in Vue.js without using any external library.

Features Overview

Before we start the implementation, let's highlight the key features of our card slider:

• Interactive Functionality: Users can scroll through the cards using navigation arrows.
• End-of-Scroll Detection: The slider will disable the forward arrow when reaching the end.
• Default State: The slider initializes at the beginning by default.
• Reusable Component: Our component will be easily reusable and customizable.

Implementation Steps

Step 1: Set Up the Vue Project

If you haven't already set up a Vue project, you can use Vue CLI to create a new one:

vue create vue-card-slider

Step 2: Create the ItemsSlider Component

Under the components directory, create a new file named ItemsSlider.vue. This file will contain the code for our card slider component.

<!-- components/ItemsSlider.vue -->

<template>
  <div class="item-slider-container">
    <h4 class="px-3 mb-3 item-title">{{ title }}</h4>
    <div class="item-slider">
      <div @click="slide(-100)" :class="{ 'is-disabled-hide': scrollX < 1 }" class="left-arrow-left">
        <MdArrowBackIos size="70px" />
      </div>
      <div ref="scrl" @scroll="scrollCheck" class="item-container">
        <slot></slot>
      </div>
      <div @click="slide(100)" :class="{ 'is-disabled-hide': scrollEnd }" class="right-arrow-right">
        <MdArrowForwardIos size="70px" />
      </div>
    </div>
  </div>
</template>

<script>
import { MdArrowForwardIos, MdArrowBackIos } from "vue-icons/md";

export default {
  name: 'ItemsSlider',
  components: {
    MdArrowForwardIos,
    MdArrowBackIos
  },
  data() {
    return {
      scrollX: 0,
      scrollEnd: false
    };
  },
  methods: {
    slide(shift) {
      this.$refs.scrl.scrollBy({
        left: shift,
        behavior: 'smooth'
      });

      this.$refs.scrl.scrollLeft += shift;
      this.scrollX += shift;

      if (Math.floor(this.$refs.scrl.scrollWidth - this.$refs.scrl.scrollLeft) <= this.$refs.scrl.offsetWidth) {
        this.scrollEnd = true;
      } else {
        this.scrollEnd = false;
      }
    },
    scrollCheck() {
      this.scrollX = this.$refs.scrl.scrollLeft;

      if (Math.floor(this.$refs.scrl.scrollWidth - this.$refs.scrl.scrollLeft) <= this.$refs.scrl.offsetWidth) {
        this.scrollEnd = true;
      } else {
        this.scrollEnd = false;
      }
    }
  },
  props: {
    title: String
  }
};
</script>

<style scoped>
/* Add your CSS styles here */
/* ... */
</style>

Step 3: Use the Component in App.vue

In your App.vue file, import and use the ItemsSlider component by passing necessary props and card data:

<template>
  <div id="app">
    <ItemsSlider title="Top Deals">
      <div v-for="(item, index) in topDealsItems" :key="index">
        <!-- Your card content goes here -->
        <Card :title="item.title" :price="item.price" />
      </div>
    </ItemsSlider>
  </div>
</template>

<script>
import ItemsSlider from './components/ItemsSlider.vue';
import Card from './components/Card.vue'; // Assuming you have a Card component

export default {
  name: 'App',
  components: {
    ItemsSlider,
    Card
  },
  data() {
    return {
      topDealsItems: [
        { title: 'Item 1', price: 10 },
        { title: 'Item 2', price: 20 },
        { title: 'Item 3', price: 30 },
        // Add more items as needed
      ]
    };
  }
};
</script>

<style>
/* Add global styles here if needed */
/* ... */
</style>

Step 4: Create Card Component

Create a Card.vue component under the components directory for individual card items:

<template>
  <div class="card">
    <!-- Your card content -->
    <h5>{{ title }}</h5>
    <p>{{ price }}</p>
    <!-- Add more card details if required -->
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    title: String,
    price: Number
    // Add more props as required
  }
};
</script>

<style scoped>
/* Card styles go here */
/* ... */
</style>

Conclusion

Congratulations! You've successfully built a responsive horizontal scrolling card slider in Vue.js. This slider allows users to scroll through cards using navigation arrows and can be easily customized and reused across your Vue.js applications. Feel free to adjust the styles, add more functionalities, or customize according to your specific requirements. Happy coding!