Create a level2 element —Carousel

OnePage Tutorial

OnePage is a Joomla extension created for building responsive landing page.It helps users reduce coding repeatedly and simplify all the flow. For more information, please visit our site.

Carousel

If you don’t know what Carousel is in your mind, see this example.

Carousel is a very popular effect(Layout Element) in OnePage Design.

Let’s start to create a level2 element — Carousel in back end.

Select All to Yes like the left

Select Col-md- to 12.

Now the carousel setting is finished. We continue to create the children elements.

Create a level3 element — Item.

1. Upload an imge.

You can go to unsplash.com to download images.

2. Add the caption.

3. Select Carousel Item in Template select box. Save

Repeat the step to create one more carousel Item.

Once you finish, the carousel is created successfully.

Advanced

How to make the fullscreen carousel?

Go to the parent section of this carousel. Here we click the row-1015.

Row-1015 is the parent section in this example.

Now you can see the parameter “Full Width” is No, change it to Yes, save it.

Finished! Go to the front end to preview.

After 1.4.2, we have created a new feature — template.

There are two styles for Carousel currently. Try it yourself please!

Css Style

At last, you can customise the style in CSS Editor with code below:

.opcarousel {/*-- --*/}
.carousel-indicators {/*-- The Dot --*/}
.carousel-inner .item{/*-- The Container of Content --*/}

That’s all! If you have any idea about improving our product or document, drop us a line in our website.

Thanks for your reading.