Doug Black
Posts: 0
Joined: Wed Aug 14, 2013 11:36 am

Swiper Problem

Ok, so I'm back! :)

I am trying to use Swiper to do a swiping banner across the top of the app. The Swiper works fine. However, the DIV retains its size that it has in the app with the three other DIVs for the banner inside.

So here's the design in the app.
Image

And here's the problem. The Menu should start right under the banner. However, its separated by a big distance.
Image

Any thoughts?

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Swiper Problem

Hello Doug, please share your project with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and tell steps to test the question above.

Doug Black
Posts: 0
Joined: Wed Aug 14, 2013 11:36 am

Swiper Problem

App is shared (Church App Template). Just start the app and you'll see the issue.

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Swiper Problem

Sorry, didn't check it was shared. I'll test and update asap.

Doug Black
Posts: 0
Joined: Wed Aug 14, 2013 11:36 am

Swiper Problem

Thanks!

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Swiper Problem

Doug, in SwiperCSS asset for .swiper-container and .swiper-wrapper change:

pre
position:relative;
/pre
on:
pre
position:fixed;
/pre

Doug Black
Posts: 0
Joined: Wed Aug 14, 2013 11:36 am

Swiper Problem

That partially solved the problem; but now it looks very bizarre, is showing the slides + the remaining space in the DIV, and is hiding some of the menu.

Image

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Swiper Problem

For menuGrid component change top margin value, for example set 20, you'll see changes. Then edit as you need.
Image

Doug Black
Posts: 0
Joined: Wed Aug 14, 2013 11:36 am

Swiper Problem

This appears to show the menu, but it obscures me from clicking on the top menu items. I believe the remaining portion of the DIV is still covering it.

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Swiper Problem

Sorry for delay.
In CSS asset replace:
pre
div.swiper-container, div.swiper-slide {
width: 100%;
height: 100vw;
overflow: hidden !important;
}/pre

with
pre
div.swiper-container {
width: 100%;
height: 100vw;
overflow: hidden !important;
}/pre

Return to “Issues”