SlideShow recycles element either vertically or horizontally.  Olitt enables you to add the horizontally sliding images to your site through the slideshow integration. You can add up to a maximum of 5 images. Slideshow helps you maximize the space on your site while creating a great impression to your site users.

The slideShow can be used to display Ads or content specific to your site. Often, developers achieve this effect through CSS or Twitter bootstrap. However, Olitt slideshow integration plugin provides a handy way of achieving this by allowing users to only specify the section within their site they wish to display the sliding content and links of the images to display.

The Olitt slideShow contains indicators and navigation tabs. The indicator [usually at the bottom] shows the current image ad navigation tab enables users to trigger a slide up or down the stack.

Follow the step below to add SlideShow to your Olitt website:

Step 1. Prepare the image Links.

This is the URL path of the images to be displayed. These can be images within your site or outside source. You need at least 5 links.

Step2: Obtain the Id of the element to display the slideShow.

 Open a new tab on your browser and log in to your Olitt account.

Once you login to your, account select websites to enter “my websites page”. Hover the mouse cursor over the templates and select the edit template.

You can create the HTML div element or use already defined div element in your template. Scroll down and click on the section you wish to display the images. On the context menu that pops up, click on the edit icon.

The id is the HTML tag attribute that uniquely identifies the element with the document/page. Add the id on the container element selected above.

Save the changes and return to “my website” page.

From the “my website” page, click the more (…) options and select plugins. 

From the list that appears, scroll down and locate “Slide integration”.  Click on Expand.

Add the id element you create above and the links to the images as shown below. You can replace the links with yours.

Click the connect button to complete the process. 

 You should now be able to see “connected” green text. 

Refresh your website and now you should be able to see the sliding images.