Forum | Appery.io

I am using the jQuery plugin called Swiper (http://www.idangero.us/sliders/swiper/). However, it's presenting some problems for me.

It should create two grids that you can scroll back and forth to see. However,

It creates an overflow scrollbar with nothing below it, and

It creates a third slide with nothing in it. When you click the empty space, it goes to the first slide.

Any thoughts on how to rectify this?

Hi Doug,

How do you add this swiper? What do you add to Grid?

Swiper comes from: https://github.com/nolimits4web/Swiper

You add a Javascript and CSS file into the app.

The Grid is just images for now. Per the instructions on the Swiper site, I created HTML components with a type as DIV, and put the Grid component inside.

If it would help, I can share the app.

Doug,

Yes, please share with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a.

Alright, app is Shared! Called Church App

Hello! Some CSS properties overwriting each other. To fix it:
1) In swiper CSS file in the end add prediv.swiper-container, div.swiper-slide {
width: 100%;
height: 100vw;
overflow: hidden !important;
}/pre2) In swiperSlide3 and swiperSlide1 element properties set Margin to 0 (instead 1)

Perfect! Thank you!

I had to rebuild the app from scratch. The plugin is giving me problems again, now making everything very, very small

Looked through the CSS, can't find it. Turned off the plugin and everything looked fine.

I already preemtively shared the new app with you. Church App Template.

Hello! Looks like the problem is that previously it was a Start page, but now it's not. Please try to add initialization plugin code on Load event instead Show. Another way is to leave this code on page Load and on Start screen on getChurchInfo service Success event when navigating to startScreen2 screen check Use full screen refresh.

Beautiful, thank you!