Implementing Swiper JS Navigation Buttons in Vue

Swiper JS is a powerful and flexible JavaScript library for creating touch-enabled sliders and carousels. We will focus on how to style and implement the navigation buttons of Swiper JS in a Vue.js project. We’ll walk through the code provided and explain the steps to achieve this.

Prerequisites

Before proceeding, make sure you have the following:

1. Basic knowledge of Vue.js and its components.
2. A Vue.js project set up with Swiper JS (swiper: "^10.1.0") installed and properly registered.

Understanding the Code

The provided Vue component is a list that displays a collection of users’ favorite status using Swiper JS. The component uses SwiperContainer and SwiperSlide components provided by Swiper to create a carousel. We’ll mainly focus on styling the navigation buttons of the carousel.

Utilizing Swiper in the Template

Let’s take a closer look at how we integrate the Swiper JS carousel within the template.
Here, we define the structure of our carousel using the swiper-container and swiper-slide components. The swiper-container component encapsulates the entire carousel, while each swiper-slide represents an individual item within the carousel.

<template>
  <div>
    <swiper-container
      :slides-per-view="5"
      :space-between="16"
      :centered-slides="false"
      :navigation="true"
      :breakpoints="{
        768: {
          slidesPerView: 5,
        },
      }"
      @progress="onProgress"
      @slidechange="onSlideChange"
      ref="swiperRef"
      init="false"
    >
      <swiper-slide v-for="(status, idx) in useStatus.statuses" :key="idx">
        <StatusItem
          @click="() => {}"
          :name="status.name"
          :photo="status.photoUrl"
        />
      </swiper-slide>
    </swiper-container>
  </div>
</template>

Step 1: Import Swiper and SwiperSlide

At the beginning of the script section, we import the required modules from Swiper.

import { register } from “swiper/element/bundle”;

The register() function allows us to import the necessary Swiper components for use.

Step 2: Add Swiper Navigation Parameters

In the mounted lifecycle hook, we initialize and style the Swiper navigation buttons. We define the styles for the “next” and “previous” buttons using the injectStyles parameter.

const swiperContainer = this.$refs.swiperRef;

const params = {
  navigation: true,

  injectStyles: [
    `
    .swiper-button-next,
    .swiper-button-prev {
      width: 32px ;
      height: 32px ;
      background: #ffffff ;
      border-radius: 50%;
      box-shadow: 0 0.5rem 1rem rgba(16, 28, 38, 0.05);
      color: #000000;
    }
    .swiper-button-next svg ,  .swiper-button-prev svg{
      width: 20%;
    }
    `,
  ],
};

The `navigation: true` parameter grants life to the navigation buttons, while the `injectStyles` rule enables the infusion of bespoke styles into these buttons.

Step 3: Application of Styles to SwiperContainer

To infuse our crafted navigation styles into the SwiperContainer, the Object.assign method comes to our aid. We merge the params object with the swiperContainer object, ensuring that our navigation button styles seamlessly integrate into the Swiper instance.

Object.assign(swiperContainer, params);
swiperContainer.initialize();

The swiperContainer.initialize() function serves as the gateway to initializing the Swiper instance with our curated parameters, including the designed navigation styles.

Conclusion

Incorporating Swiper JS navigation buttons into your Vue.js project can greatly enhance the user experience of your carousels. By following the steps outlined in this guide, you’ve learned how to style and implement these navigation buttons seamlessly.

Here’s a recap of the key points:

1. Import Swiper Components: Begin by importing necessary modules using the register() function from Swiper.
2. Navigation Parameters: In the mounted lifecycle hook, customize your navigation buttons’ styles using the injectStyles parameter. This allows you to define the appearance of the “next” and “previous” buttons.
3. Application of Styles: Use Object.assign() to merge your defined styles with the SwiperContainer component, ensuring that the navigation button styles are applied to the Swiper instance.

By integrating Swiper JS into your Vue.js application and tailoring the navigation buttons to your design, you can create engaging and user-friendly carousels that showcase your content effectively.

Remember, proper setup and registration of Swiper JS are essential for a successful implementation. Feel free to customize the navigation button styles to align with your project’s aesthetics.

Happy coding!