How to make a Walkthrough Introduction Slider in Ionic Vue Application?

Question

I have seen most of the mobile application has an intro slider when we first time installs the app. I searched on google but all of them are old version of Ionic with Angular.

I'm very confused about where to put the component and how should I manage the state.

I'm using Capacitor in my application and I think the capacitor has storage.

I also want to know what is the proper flow of doing this thing.

Thanks in advance.

take a look at this post - https://dev.to/aaronksaunders/ionic-framework-vuejs-and-dynamic-slides-using-swiperjs-hk4 leave comment if you have question — Aaron Saunders, Dec 30 '21 at 18:22
I think swiper.js should be a good choice for this kind of thing. Next how should I implement it? — Hasibur Rahman, Dec 30 '21 at 18:33

score 0 · Answer 1 · answered Feb 19 '22 at 17:48

To remember or track if the slider was shown before you have to store some kind of information to the device. You can use the localStorage or capacitor storage plugin. I will recommend using the plugin as localStorage data might get removed by the operating system or user after some time.

Here is the process to achieve this using the plugin.

Install and sync the plugin

If you are using the Capacitor version 2 or less, you don't have to install it.

npm install @capacitor/storage
npx cap sync

Use it like this

import { Storage } from '@capacitor/storage';

const { value } = Storage.get({
  key: 'introShowed',
});

if (!value) {
  // logic to show the intro goes here

  // set the value to true so next time this code block will not be executed
  Storage.set({
    key: 'introShowed',
    value: true,
  });
}

score 0 · Answer 2 · answered Apr 16 '22 at 07:55

0

When main layout is created you can store an value to Storage. And after that you can check for it.

answered Apr 16 '22 at 07:55

How to make a Walkthrough Introduction Slider in Ionic Vue Application?

2 Answers2

Install and sync the plugin

Use it like this