Vue.js 3 slider component using Splid.js

Building a slider in Vue.js 3 with the Splide.js library is a great way to enhance the user experience on your website. Splide.js is a responsive, lightweight, and fast slider library that allows you to create beautiful sliders with various effects. This article will guide you through the process of building a slider in Vue.js 3 using the @splidejs/vue-splide package and its various options and themes.

Before we begin, here's an ordered list of the steps necessary to build the slider in Vue.js 3 with Splide.js:

1. Install the @splidejs/vue-splide package

2. Set up the Vue.js project

3. Create the Vue component

4. Import the Splide component

5. Use the Splide component in the template

6. Apply styles and customize the slider

Let's begin!

Install the @splidejs/vue-splide package:

To install the @splidejs/vue-splide package, you can use npm or yarn. Open your terminal and run the following command:

$ npm install @splidejs/vue-splide

Or

yarn add @splidejs/vue-splide

Setup the Vue.js Project

If you already have a Vue.js project, you can skip this step. If not, you can set up a new Vue.js project using the Vue CLI. To install the Vue CLI, run the following command:

npm install -g @vue/cli

Or

yarn global add @vue/cli

Once you have the Vue CLI installed, run the following command to create a new Vue.js project:

vue create my-slider-project

Create the Vue component:

In your Vue.js project, create a new component for your slider. You can create a new component manually or using the following command:

vue generate component slider

Import the Splide component:

Next, you need to import the Splide component in your component. You can do this by adding the following code to your component:

<script>
import { Splide, SplideSlide } from "@splidejs/vue-splide";
export default {
    components: {
        Splide,
        SplideSlide,
    },
};
</script>

Use the Splide component in the template:

You can now use the Splide component in the template of your component. You can do this by adding the following code to your component:

<template>
  <splide>
    <splide-slide>Slide 1</splide-slide>
    <splide-slide>Slide 2</splide-slide>
    <splide-slide>Slide 3</splide-slide>
  </splide>
</template>

Apply styles and customize the slider:

One option you have in order to style your slider is to include one of Splide.js' pre-included themes. you can choose from:

// Default theme
import '@splidejs/vue-splide/css';

// or other themes
import '@splidejs/vue-splide/css/skyblue';
import '@splidejs/vue-splide/css/sea-green';

// or only core styles
import '@splidejs/vue-splide/css/core';

And to include it you can copy the import statement of your theme of choice into the component's script tag:

<script>
import { Splide, SplideSlide } from "@splidejs/vue-splide";
import '@splidejs/vue-splide/css';
export default {
    components: {
        Splide,
        SplideSlide,
    },
};
</script>

This results in a basic styling of your slider, but customizing the Splide.js library is incredibly easy, and we do so using options. To add options to the Splide.js component in Vue.js, you need to pass them as props to the <splide> component.

<script>
import { Splide, SplideSlide } from '@splidejs/vue-splide';
import '@splidejs/vue-splide/css';
export default {
  components: {
    Splide,
    SplideSlide,
  },
  data() {
    return {
      options: {
       rewind: true,
       perPage: 4,
       padding: '0.5em',
       perMove: 1,
       gap: '20px',
       pagination: false,
      },
    };
  },
};
</script>

You can find a full list of options in the Splide.js documentation, along with a description of what each option does. By combining different options, you can create a slider with the exact behavior and appearance that you need.

You can also use your knowledge of CSS, its frameworks, or Vue.js methods and Hooks to further personalize your slider. Thanks for reading through, don't hesitate to ask any questions you might have or make a suggestion to improve this article. Happy Coding!