Easy way to create a slider in Vue.js with Splide.js

As a front-end developer, when you want to show content like images, testimonials, or product showcases, the first thing that comes to mind is a slider or carousel. Using basic HTML and CSS to create sliders or carousels takes a lot of work, time and handling the values that are passed to these elements is challenging. So, here we need some framework or library that has functionality and automated features to display the showcases and we can easily use them. Splide.js is one of the libraries that stand out in the world of sliders. It’s lightweight, highly customizable, and integrates seamlessly with Vue.js, React.js, and Svelte.

What is Splide.js?

Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies. It helps you to create various kinds sliders by just changing options, such as multiple slides, thumbnails, nested sliders, vertical direction and more.

Why Splide.js ?

1. Lightweight: Splide.js is only 29kb or 12kb gzipped.
2. No dependencies: Splide.js is written without dependencies and has no lighthouse errors.
3. Accessible: Splide.js manages focus within pagination to make it easier for keyboard users to navigate.
4. Versatile: Splide.js can be used to create a variety of sliders, including — multiple slides, thumbnails, nested sliders, vertical direction.
5. Feature: Splide.js have features like — auto play, slide or fade transition, breakpoints, free drag mode, lazy loading, auto width and height.

Preview of Splide’s Slider:

Getting Started with Splide in Vue.js

Step 1: Install Splide.js
install the Vue-specific Splide package via npm:

npm install @splidejs/vue-splide

Step 2: Import Splide Components
In your Vue component, import the necessary components:

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

Step 3: Add Slider
Now, add a Splide to your template:

<template>
  <Splide :options="{ type: 'loop', perPage: 1, gap: '1rem', autoplay: true }">
    <SplideSlide>
      <img src="image1.jpg" alt="Image 1" />
    </SplideSlide>
    <SplideSlide>
      <img src="image2.jpg" alt="Image 2" />
    </SplideSlide>
    <SplideSlide>
      <img src="image3.jpg" alt="Image 3" />
    </SplideSlide>
  </Splide>
</template>

Step 4: Style your slider
Splide provides a default stylesheet that you can use or customize. Import the default styles in your project:

@import '@splidejs/splide/dist/css/splide.min.css';

For custom styling, Splide offers some classes such as .splide, .splide__track, and .splide__slide. Here’s an example:

.splide {
  max-width: 800px;
  margin: auto;
  background-color: rgb(245, 241, 241);
  padding: 1rem;
}
.splide__slide img {
  border-radius: 10px;
  width: 500px;
  height: 500px;
}

Customize Your Slider

Splide provides a range of configuration properties to make the slider according to your needs. Here are some ways to customize your slider:

1. Using Slider Behavior Options
   Splide offers a range of options to customize its behavior. Pass these options as props to the Splide component:

Some common options

Here’s an example of a carousel with auto-play and fade effect:

<Splide :options="{ type: 'fade', autoplay: true, interval: 2000 }">
  <SplideSlide>
    <img src="image1.jpg" alt="Image 1" />
  </SplideSlide>
  <SplideSlide>
    <img src="image2.jpg" alt="Image 2" />
  </SplideSlide>
</Splide>

2. Responsive Settings
Splide allows you to customize the slider behavior to make it responsive according to your screen size. This ensures that the slider looks and works perfectly on all devices. Splide has a property named ‘breakpoints’, that allows you to create custom breakpoints for making the slider responsive to your screen size, passed this property as props to your component.

Here is an example of how to create responsive slider-

<script>
  export default {
    data() {
      return {
        options: {
          perPage: 3,
          breakpoints: {
             768: {
               perPage: 1,       // 1 slide per page on smaller screens
               height: '180px', // Adjust slider height for smaller screens
             },
             480: { perPage: 1,height: '150px'},
          }, 
        }, 
      };
   },
 }
</script>

3. Dynamic Slides
Assume you have an array of slide data that you fetch from an API or define in your component. Here’s how you can generate slides dynamically from data:

<template>
  <Splide :options="options">
    <SplideSlide v-for="(item, index) in items" :key="index">
      <img :src="item.image" :alt="item.alt" />
    </SplideSlide>
  </Splide>
</template>
<script>
export default{
  data() {
    return {
      options: { type: 'slide', autoplay: true, gap: '1rem'},
      items: [
        { image: 'image1.jpg', alt: 'First Image' },
        { image: 'image2.jpg', alt: 'Second Image' },
        { image: 'image3.jpg', alt: 'Third Image' },
        { image: 'image4.jpg', alt: 'Fourth Image' },
      ],
    };
  }
 }
</script>

4. Custom navigation arrow/button
If you want to hide the default arrows of Splide slider and display your custom arrows that match your website or web application’s design, Splide allows you to replace the default navigation arrows with custom controls.
To start, you need to disable the default navigation arrows using ‘arrows’ property (:options=”{ arrows: false }”) and create your own buttons or use your custom arrow image.

Here’s how you can replace default navigation arrows with your custom buttons:

<template>
  <!-- disable the default navigation -->
  <Splide ref="slider" :options="{ arrows: false }">
    <SplideSlide>Slide 1</SplideSlide>
    <SplideSlide>Slide 2</SplideSlide>
  </Splide>
   <!-- create your custom buttons -->
  <button @click="goToSlide(0)">Go to Slide 1</button>
  <button @click="goToSlide(1)">Go to Slide 2</button>
</template>
<script>
  import { Splide, SplideSlide } from '@splidejs/vue-splide';
  import '@splidejs/splide/dist/css/splide.min.css';
  export default {
    components: {
      Splide,
      SplideSlide,
    },
    methods: {
    goToSlide(index) {
      this.$refs.slider.go(index);
    },
  },
  };
</script>

5. Synchronized Multiple Sliders
Imagine you have a large image slider displaying high-quality product photos, and a smaller thumbnail slider below it. When a user clicks on a thumbnail, the large image slider updates to show the corresponding image, and vice-versa to create an interactive experience.
With Splide, you can easily sync multiple sliders using the sync() method. This links the sliders together so they work in sync, making it easy to create this type of interaction.

1. Main Slider: Displays large images of cars.
2. Thumbnail Slider: Displays smaller images of cars for navigation.

Synchronized sliders

Here’s how you can add this functionality to your Vue component:

<template>
    <!-- Main Slider -->
    <Splide :options="mainOptions" ref="main" >
       <SplideSlide> 
        <img :src="require('@/assets/images/red_car.jpg')" />
      </SplideSlide>
      <SplideSlide>
        <img :src="require('@/assets/images/blue_car.jpeg')" />
      </SplideSlide>
      <SplideSlide>
        <img :src="require('@/assets/images/orange_car.jpg')" />
      </SplideSlide>
    </Splide>
    <!-- Thumbnail Slider -->
    <Splide :options="thumbnailOptions" ref="thumbnail" class="thumbnail" >
      <SplideSlide> 
        <img :src="require('@/assets/images/red_car.jpg')" />
      </SplideSlide>
      <SplideSlide>
        <img :src="require('@/assets/images/blue_car.jpeg')" />
      </SplideSlide>
      <SplideSlide>
        <img :src="require('@/assets/images/orange_car.jpg')" />
      </SplideSlide>
    </Splide>
</template>
<script>
  export default{
    data(){
      return{
        // Options for the main slider
        mainOptions: {
          type: 'slide', 
          perPage: 1, 
          arrows: true,
          pagination: false
        },
        // Options for the thumbnail slider
        thumbnailOptions: {
          type: 'slide', 
          isNavigation: true, 
          perPage: 3, 
          gap: '10px', 
          pagination: false, 
          focus: 'center',
        },
      };
    },
     mounted() {
      // Synchronize the main slider with the thumbnail slider
      this.$refs.main.splide.sync(this.$refs.thumbnail.splide);
    }
  }
</script>
<style scoped>
.splide {
  max-width: 800px;
  margin: auto;
  background-color: rgb(245, 241, 241);
  padding: 1rem;
}
.splide__slide img {
  border-radius: 10px;
  width: 500px;
  height: 300px;
}
.thumbnail .splide__slide img {
  width: 200px;
  height: 200px;
}
</style>

Use cases of Splide.js

Here are some use cases where Splide excels:

1. Image Galleries: display photos or product images in a responsive layout.
2. Testimonial Sliders: Show the customer feedback dynamically.
3. Feature Highlights: To display key features on landing pages through a cycle.
4. Content Navigation: Create carousels for news or blog posts.

Conclusion

Splide.js make easy for developers to add visually appealing sliders to their Vue.js applications. Its customization features and accessibility make it the perfect tool for various projects. By following this guide, you can integrate and customize Splide to create sliders that enhance the overall experience.

About the Author

Anjali is a Software Development Engineer with a keen interest in Vue.js and Node.js. She is eager to learn and grow her skills in software development, exploring new technologies and working on exciting projects to enhance her knowledge.

About CodeStax.Ai

At CodeStax.AI, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But what is the real magic? It’s our tech tribe behind the scenes. If you have a knack for innovation and a passion for redefining the norm, we have the perfect tech playground for you. CodeStax. Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us and be part of the revolution that’s redefining the enterprise tech landscape.

Reference:

Vue Splide - Splide

Options - Splide