Uncaught TypeError: swiper.destroy is not a function (welcomescreen.js:165)

[valnub]

Uncaught TypeError: swiper.destroy is not a function (welcomescreen.js:165)

[valnub]

It's not your fault. There was an incompatibility issue with swipeable tabs which are a new component in F7.

I fixed the bug in the latest version of welcomescreen.js: https://github.com/valnub/Framework7-Plugin-Welcomescreen/blob/master/welcomescreen.js

Update to this new version and it should work.

[valnub]

Ah, ok. I found the problem. Has nothing to do with swipeable tabs.

That "end tutorial" button is not part of this lib. Thus, you have to attach an event listener for it on your own.

See in the example code, there you will find something like this:

$$(document).on('click', '.tutorial-close-btn', function () {
  welcomescreen.close();
});

I would not recommend to add .close-welcomescreen class to that button as it is intended for the "skip" button only.

[valnub]

Can you provide a runnable example of your code with jsfiddle? Your code looks ok so far, so there must be a mistake somewhere else.

[stileinverso]

Here the (incomplete) code but the error is still there:

http://www.stileinverso.it/demo/welcomescreen/www.zip

I found why the error occours: I use swipeable tabs in main view!

If you run the code and click "Skip" or "End tutorial" -> Error!
Now try to change this in the HTML code (line 38):

<div class="tabs-swipeable-wrap">

With this:

<div class="">

And the error goes away, your plugin works but that class is required like the docs says here:
http://framework7.io/docs/tabs.html#swipeable-tabs

I don't understand :-/

[stileinverso]

Hi, valnub!
With your update the problem is been solved.
However I had to change this code:

{
  id: 'slide3',
  picture: '<div class="tutorialicon">☆</div>',
  text: 'Thanks for reading! Enjoy this app.<br><br><a id="tutorial-close-btn" href="#">End Tutorial</a>'
}

With this:

{
  id: 'slide3',
  picture: '<div class="tutorialicon">☆</div>',
  text: 'Thanks for reading! Enjoy this app.<br><br><a href="#" class="link color-white close-welcomescreen">End Tutorial</a>'
}

I.E.: <a id="tutorial-close-btn" href="#">End Tutorial</a> -> <a href="#" class="link color-white close-welcomescreen">End Tutorial</a>

I hope I've done in a correct way, otherwise please tell me where I'm wrong.
I hope it could be useful for other people!

Thank again!

[valnub]

Hi, why did you have the HTML markup? I only updated the welcomescreen.js file and that worked for me

[stileinverso]

Sorry, I forgot to tell you the reason why I modified that HTML code.
The "Skip" button works, but the "End tutorial" not with the original code!
Can you test it?

[valnub]

Hm, that's very weird because in the example from this repo it works https://github.com/valnub/Framework7-Plugin-Welcomescreen/tree/master/example

[stileinverso]

Yes, it works if you don't use swipeable tabs from main view!

[stileinverso]

Ok, problem solved!
Thanks!!