Getting jquery code to work in FW7 (working HTML swiper example included)

Questions
1

Hi everyone,

I’m got the following effect working in Swiper w/ jQuery (HTML, outside of Framework7), but I can’t get it to work inside Framework7 as I’m not sure how to set up the Javascript.

Jan-03-2020%2019-40-49
Jan-03-2020 19-40-49.gif376×530 1.01 MB

What I’m trying to do is to have the next thumbnail be partially visible. When it is swiped to and becomes fully visible, the description fades in.

Here’s the codepen showing a working example: https://codepen.io/dfordata/pen/QWwOBRm

I’d really appreciate it if someone could let me know the code changes I need to make to get it working in FW7.

Thanks!!

2

here:
jsfiddle

change the code to your needs

3

Thanks for the fiddle. I have not previously used events like “pageBeforeIn”, so I’ll need to review the documentation and experiment a bit. I will follow up with what I’ve tried.

1 Like