Forum | Appery.io

I'm having trouble creating a full screen carousel with labels on it and with buttons at the bottom of the page, shown on the attached photo. Is this possible to achieve with Appery.io?

If so, which component should I use for the bottom buttons and how to adjust the carousel within Appery.io without touching the source?

I want to avoid touching the HTML files, since I won't be able to use the tools once I modify the source.

Thank you in advance,

Hi Nerso,

An interesting challenge for sure.

The bottom two buttons in Appery are a NavBar - you can find the component on the left in the designer. You would adjust the number of items count to two. The Navbar would get mounted into the footer

In terms of the carousel component you would use an image type - and you would have a page with no header (turn off the header checkbox).

You should be able to create a sample page pretty quickly with these two pieces of information. In the top line - where the Verizon and carrier information appear - those are options in, for example, the Apple build file (Settings, project, Apple binary).

please let me know how you fare....

Best,

Bruce

Hi Bruce,

Thank you so much for your prompt answer, it worked like a charm. I just need to figure out how to add a divider between the navbar buttons, probably need to add a custom css.

Would you know if its possible to change the location of the carousel item buttons ( the small circle's ) to be on the top of the image, instead at the bottom?

Thanks again!

Yes more than possible ! Look at a post I did yesterday here ... In the specification for the Carousel There is a place where you can tell it what HTML component to put the indicators into... And it's as simple as potentially setting up a grid at the top of your screen above the carousel... And naming one of the cells in the middle of the grid appropriately and using that in the carousel space for indicators

Hope that makes sense ? If not I'll point you at my post from yesterday when I get to my desk...

Thanks Bruce! Yes, it makes perfect sense. So I created a grid for indicators and it works just fine, however if you try to change the margin-top/bottom to position over the carousel image, it goes behind it. I've tried playing with z-index, but that didn't help. Do you have an idea how can I place the indicators on the top of the image, once I have the indicators within a designated grid?

Thanks!

Hi Nerso,

We've reached the limits of my expertise here ... It's time to phone a friend and get the Appery team in...

Appery team ? Can you help here please ?

Best,
Bruce

Just one quick potential thought ... You might try to put the indicators in the header ? And potentially call the header fixed ??

thanks Bruce, gonna give a try now

Hello Nick,
Is this possible to achieve with Appery.io?

yes.

which component should I use for the bottom buttons

1) add navigation bar in the footer
2) remove extra buttons
3) click on each button and remove icon

how to adjust the carousel within Appery.io without touching the source?
you can use css styles, to do so.
here is the small tutorial how to find and change styles for button component, it describes principle of working with css styles in Appery.io and overriding default theme
http://blog.bismallion.com/appery-tut...

Bruce, I was able to achieve the desired results, but have a small problem, will post to Egor. Thanks for your help!