DEV Community

Cover image for Ionic Framework VueJS and Dynamic Slides Using SwiperJS
Aaron K Saunders
Aaron K Saunders

Posted on

Ionic Framework VueJS and Dynamic Slides Using SwiperJS

#swiperjs #ionic #vue #vite

Ionic Framework VueJS and SwiperJS

Ionic has depreciated IonSlides in the v6 release and recommends using the underlying library SwiperJS.

In this short post I show how to integrate SwiperJS and it VueJS wrapper to display a set of slides holding IonCards. How to dynamically add and removed slides from the list of slides using the SwiperJS library.

See Previous Video For Setting Up Vite & Ionic Project

Also because vitejs is awesome and fast, I will be using that as the starting point for my application. See more information on Ionic and ViteJS and how to setup the app in the video I posted last week.

Video Version of Blog Post

Adding SwiperJS

after the project is set up you need to add SwiperJS to the project

npm i swiper
Enter fullscreen mode Exit fullscreen mode

Also we will be adding some styling from the swiper library so to avoid the sass errors, we need to install another library

npm install -D sass
Enter fullscreen mode Exit fullscreen mode

Creating Slides Page

This is the template section for the component, most of this is basic ionic setup

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button></ion-back-button>
        </ion-buttons>
        <ion-title>Ionic Vite - Swiper - Slides</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>

    // will add slides content here...

    </ion-content>
  </ion-page>
</template>
Enter fullscreen mode Exit fullscreen mode

Next we need to include the appropriate imports

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  IonContent,
  IonButton,
  IonButtons,
  IonBackButton,
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonModal,
  IonCard,
  IonCardContent,
} from "@ionic/vue";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";

export default defineComponent({
  name: "Slides",
  components: {
    IonHeader,
    IonPage,
    IonButton,
    IonButtons,
    IonBackButton,
    IonContent,
    IonTitle,
    IonToolbar,
    IonCard,
    IonCardContent,
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
    };
  },
});
</script>
Enter fullscreen mode Exit fullscreen mode

There are some styles that i figured out to make the page look ok, you can play around with them in your example. The .swiper-slide and .swiper-container are classes from the SwiperJS documentation

<style>
ion-card {
  height: 90%;
}
.swiper-slide {
  padding: 12px;
  text-align: center;
  font-size: 28px;
  background: #fff;
}
.swiper-container {
  width: 100%;
  height: 80%;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Lets create a data structure, slideData to hold our slide content and be sure to return it so it can be accessed in the template

setup() {

    // data used to draw slides
    const slideData = ref<any>([{ id: "1" }]);

    return {
      slideData,
    };
  },
Enter fullscreen mode Exit fullscreen mode

Dynamically Adding Slides To Page

Lets add our slide components to the template, we will loop through the slideData to render a slide for each entry in the slideData

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic Vite - Swiper - Slides</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <!-- header on page -->
      <div style="padding-left: 10px">
        <h1>Swiperjs Slides</h1>
      </div>

      <!-- slides created by loopong through slideData -->
      <swiper :pagination="{ clickable: true }" >
        <template v-for="s in slideData" :key="s.id">
          <swiper-slide>
            <!-- put IonCard inside of the swiper-slide element -->
            <ion-card>
              <ion-card-content>
                <!-- using name from data for slide title -->
                <div>Slide Name {{ s.name }}</div>
              </ion-card-content>
            </ion-card>
          </swiper-slide>
        </template>
      </swiper>
    </ion-content>
  </ion-page>
</template>
Enter fullscreen mode Exit fullscreen mode

One last step is making sure that the swiper library knows that we have updated the DOM by adding slides. The documentation states that when adding slides through javascript, you should call swiper.update() we will do that in the onMounted lifecycle event.

  onMounted(() => {
    setTimeout(() => {
      swiperRef.value.update();
    }, 1);
  });
Enter fullscreen mode Exit fullscreen mode

Now to add more slides to the page, we just need to add more data to the slideData object and since it is a ref, and observable, when it changes the template will be re-rendered with the new content.

Add a new function in setup and return the function so it can be accessed in the template

setup() {
  // data used to draw slides
  const slideData = ref<any>([{ id: "1", name: "initial slide" }]);

  // adds a slide to the list by updating the data that
  // the slides are derived from
  const addSlide = () => {
    slideData.value = [
      { id: new Date().getTime() + "", name: new Date() + "" },
      ...slideData.value,
    ];
  };

  return {
    slideData,
    addSlide,
  };
},
Enter fullscreen mode Exit fullscreen mode

Add a new button in the templated

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic Vite - Swiper - Slides</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <!-- header on page -->
      <div style="padding-left: 10px">
        <h1>Swiperjs Slides</h1>
      </div>

      <!-- slides created by loopong through slideData -->
      <swiper :pagination="{ clickable: true }">
        <template v-for="s in slideData" :key="s.id">
          <swiper-slide>
            <!-- put IonCard inside of the swiper-slide element -->
            <ion-card>
              <ion-card-content>
                <!-- using name from data for slide title -->
                <div>Slide Name {{ s.name }}</div>
              </ion-card-content>
            </ion-card>
          </swiper-slide>
        </template>
      </swiper>

      <!--------------------------------->
      <!-- new button for adding slide -->
      **<div style="padding-left: 10px">
        <ion-button @click="addSlide">ADD SLIDE</ion-button>
      </div>**

    </ion-content>
  </ion-page>
</template>
Enter fullscreen mode Exit fullscreen mode

Getting The Swiper Instance

The SwiperJS Vue Component has an event that will provide us with the swiper instance as soon as it is available. Lets change the template and the setup function to get the instance

@swiper="onSwiperInstance" listener added to get swiper instance

<!-- slides created by loopong through slideData -->
<!-- @swiper="onSwiperInstance" listener added to get swiper instance -->
<swiper :pagination="{ clickable: true }"  **@swiper="onSwiperInstance"**>
  <template v-for="s in slideData" :key="s.id">
    <swiper-slide>
      <!-- put IonCard inside of the swiper-slide element -->
      <ion-card>
        <ion-card-content>
          <!-- using name from data for slide title -->
          <div>Slide Name {{ s.name }}</div>
        </ion-card-content>
      </ion-card>
    </swiper-slide>
  </template>
</swiper>
Enter fullscreen mode Exit fullscreen mode

need to change setup to include the function onSwiperInstance and return it so the template can access it

setup() {
  // data used to draw slides
  const slideData = ref<any>([{ id: "1", name: "initial slide" }]);

  **// NEW -> 
  // reference to swiper
  const swiperRef = ref<any>(null);**

  onMounted(() => {
    setTimeout(() => {
      swiperRef.value.update();
    }, 1);
  });

  **// NEW -> 
  // used to get an instance of the swiper object after it is
  // initialized
  const onSwiperInstance = (v: any) => {
    console.log("onSwiperInstance", v);
    swiperRef.value = v;
  };**

  // adds a slide to the list by updating the data that
  // the slides are derived from
  const addSlide = () => {
    slideData.value = [
      { id: new Date().getTime() + "", name: new Date() + "" },
      ...slideData.value,
    ];
  };

  return {
    slideData,
    addSlide,
    **onSwiperInstance**
  };
},
Enter fullscreen mode Exit fullscreen mode

If you look in the console, you will see that we now have the swiper instance to be utilized to call any of the functions available to you from the SwiperJS API

Removing Slides from Page

We remove slides the same way we add slides, by updating the slideData property of the component.

Lets add a delete button to the slide, the button will call a function removeSlide and as a parameter, pass in the id of the slide to remove.

<swiper :pagination="{ clickable: true }"  **@swiper="onSwiperInstance"**>
  <template v-for="s in slideData" :key="s.id">
    <swiper-slide>
      <!-- put IonCard inside of the swiper-slide element -->
      <ion-card>
        <ion-card-content>
          <!-- using name from data for slide title -->
          <div>Slide Name {{ s.name }}</div>
          <ion-button @click="removeSlide(s.id)">DELETE SLIDE</ion-button>
        </ion-card-content>
      </ion-card>
    </swiper-slide>
  </template>
</swiper>
Enter fullscreen mode Exit fullscreen mode

Lets update to setup to include the removeSlide function

setup() {
  // data used to draw slides
  const slideData = ref<any>([{ id: "1", name: "initial slide" }]);

  // reference to swiper
  const swiperRef = ref<any>(null);

  onMounted(() => {
    setTimeout(() => {
      swiperRef.value.update();
    }, 1);
  });

  // used to get an instance of the swiper object after it is
  // initialized
  const onSwiperInstance = (v: any) => {
    console.log("onSwiperInstance", v);
    swiperRef.value = v;
  };

  // adds a slide to the list by updating the data that
  // the slides are derived from
  const addSlide = () => {
    slideData.value = [
      { id: new Date().getTime() + "", name: new Date() + "" },
      ...slideData.value,
    ];
  };

  // remove a slide from the list by filtering the data that
  // the slides are derived from
  const removeSlide = (slideId: any) => {
    let newData = slideData.value.filter((s: any) => s.id !== slideId);
    slideData.value = newData;
  };

  return {
    slideData,
    addSlide,
    onSwiperInstance,
    removeSlide
  };
},
Enter fullscreen mode Exit fullscreen mode

FULL SOURCE CODE 

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Ionic Vite - Swiper - Slides</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div style="padding-left: 10px">
        <h1>Swiperjs Slides</h1>
      </div>
      <swiper :pagination="{ clickable: true }" @swiper="onSwiperInstance">
        <template v-for="s in slideData" :key="s.id">
          <swiper-slide>
            <ion-card>
              <ion-card-content>
                <div>Slide {{ s.id }}</div>
                <ion-button @click="removeSlide(s.id)">DELETE SLIDE</ion-button>
              </ion-card-content>
            </ion-card>
          </swiper-slide>
        </template>
      </swiper>
      <div style="padding-left: 10px">
        <ion-button @click="addSlide">ADD SLIDE</ion-button>
      </div>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  IonContent,
  IonButton,
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonCard,
  IonCardContent,
} from "@ionic/vue";
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/scrollbar/scrollbar.scss";

export default defineComponent({
  name: "Slides",
  components: {
    IonHeader,
    IonPage,
    IonButton,
    IonContent,
    IonTitle,
    IonToolbar,
    IonCard,
    IonCardContent,
    Swiper,
    SwiperSlide,
  },
  setup() {
    // reference to swiper
    const swiperRef = ref<any>(null);

    // data used to draw slides
    const slideData = ref<any>([{ id: "1" }]);

    onMounted(() => {
      setTimeout(() => {
        swiperRef.value.update();
      }, 1);
    });

    // used to get an instance of the swiper object after it is
    // initialized
    const onSwiperInstance = (v: any) => {
      console.log("onSwiperInstance", v);
      swiperRef.value = v;
    };

    // adds a slide to the list by updating the data that
    // the slides are derived from
    const addSlide = () => {
      slideData.value = [{ id: new Date().getTime() + "" }, ...slideData.value];
    };

    // remove a slide from the list by filtering the data that
    // the slides are derived from
    const removeSlide = (slideId: any) => {
      let newData = slideData.value.filter((s: any) => s.id !== slideId);
      slideData.value = newData;
    };

    return {
      slideData,
      onSwiperInstance,
      addSlide,
      removeSlide,
    };
  },
});
</script>

<style>
ion-card {
  height: 90%;
}
.swiper-slide {
  padding: 12px;
  text-align: center;
  font-size: 28px;
  background: #fff;
}
.swiper-container {
  width: 100%;
  height: 80%;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Github Project

GitHub logo aaronksaunders / vite-ionic-slides-project

ionic v6 beta vitejs slides implemented using swiperjs

Getting Started with ViteJS, Ionic Framework Beta v6 SwiperJS And VueJS

This template should help get you started developing with Ionic, Vue 3 and Typescript in Vite.

Ionic has depreciated IonSlides in the v6 release and recommends using the underlying library SwiperJS.

In this short post I show how to integrate SwiperJS and it VueJS wrapper to display a set of slides holding IonCards. How to dynamically add and removed slides from the list of slides using the SwiperJS library.

Recommended IDE Setup

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue…


View on GitHub


Top comments (0)

Read next

juan_deto profile image

Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 2

Juan de Tomaso -

oneminch profile image

How to Register Custom Directives in Nuxt 3

Dawit -

skipperhoa profile image

Vue Tip : Setup Store Pinia + Custom Pagination

Hòa Nguyễn Coder -

mohamedlaminef profile image

ViteConf 2024: Innovations, Announcements, and the Road Ahead

Mohamed Lamine -