JUN Rotator Slideshow


JUN Rotator Slideshow is an extension for Joomla! that helps users create full responsive joomla slideshow module .

There are lots of parameters and you can set them easily. This awesome module is responsive and seo optimized.

It is totally compatible with Joomla 3.x, easy to install and a perfect solution for you to create your own slideshow on joomla.

After upload images you need insert image data

First you need insert data for title and description

 

You should insert data as image below

 

-          Title: Insert title text

-          Title size: you can select size of title from H1 to H6

-          Title data delay: delay time after image loaded

-          Title Effect: Select effect when title appear

-          Title Effect Out: Effect then next to other slide

-          Title Style: Insert CSS code for title

 

 

Similar as insert data for title

 

-          Description: You can insert your HTML code here as: p tag, a tag, or br tag,…

-          Description Delay: delay time after image loaded

-          Description Effect: Effect when description appear

-          Description Effect Out: Effect when next to other slide

-          Description Style: insert you css code for description

-          Url: Link image of slide

After setup data for images gallery you need configure slide options

 

From here you can configure options of slideshow as width, height and much more... All options divided in sections and you can easy know about options by hover on it’s label.

 

Title Style code:

top: 5%; left: 2%; width: auto; height: auto; color: rgb(255, 255, 255); padding: 12px; white-space: nowrap; bottom: auto; right: auto; transition: all 500ms ease 0ms; animation: none; border-width: 0px; font-size: 34px; letter-spacing: 0px; opacity: 1; margin: 0px; transform: translateY(0%);display: block; background: rgb(48, 149, 252);

Description Style code:

top: 30%; left: 2%; width: auto; height: auto; color: rgb(51, 51, 51); padding: 12px; white-space: nowrap; bottom: auto; right: auto; transition: all 500ms ease 0ms; animation: none; border-width: 0px; font-size: 21px; letter-spacing: 0px; opacity: 1; margin: 0px; transform: translateX(0%); display: block; background: rgba(255, 255, 255, 0.901961);

Title Style Code:

top: 7.5%; left: 3%; width: auto; height: auto; letter-spacing: 6px; padding: 6px 22px 6px 22px; white-space: nowrap; bottom: auto; right: auto; transition: all 500ms ease 0ms; animation: none; border-width: 0px; font-size: 26px; opacity: 1; margin: 0px; transform: translateX(0px); display: block; background: rgb(0, 0, 0);

Description style code:

top: 23.75%; left: 3%; width: auto; height: auto; letter-spacing: 7px; padding: 6px 6px 6px 22px; white-space: nowrap; bottom: auto; right: auto; transition: all 500ms ease 0ms; animation: none; border-width: 0px; font-size: 26px; opacity: 1; margin: 0px; transform: translateX(0px); display: block; background: rgb(0, 0, 0);

You can easy view other slide css code by use debug tool of browser