[heading size=”h2″ style=”uk-module-title”]Slideshow[/heading]
Use the [slideshow] shortcode to show images with nice transitions. To make a slideshow fill the entire page, use the the [full_slideshow] shortcode. The following parameters can be used with the [slideshow] and [full_slideshow] shortcodes.
[line_break/] [toggle_code open=”false” title=”Show code”][slideshow style=”gravity” autoplay=”true” animation=”scale” transition_duration=”500″ autoplay_interval=”10000″ kenburns=”false”] <!– slide 1 –> [slide] [slider_img src=”images/demo/default/slideshow/1.jpg” width=”1280″ height=”565″ alt=”image”/] [slide_caption animation=”slide-left”] [heading size=”h3″]This is a title[/heading] [slide_text]Lorem ipsum dolor amit[/slide_text] [/slide_caption] [/slide] <!– slide 2 –> [slide] [slider_img src=”images/demo/default/slideshow/2.jpg” width=”1280″ height=”565″ alt=”image”/] [slide_caption animation=”slide-left”] [heading size=”h3″]Another title[/heading] [slide_text]Lorem ipsum dolor amit[/slide_text] [/slide_caption] [/slide] <!– slide navigation –> [slide_nav] [slide_nav_item order=”0″/] [slide_nav_item order=”1″/] [/slide_nav] [/slideshow][/toggle_code] [line_break/]
The following are the parameters required when using the [slideshow] or [full_slideshow] shortcodes:
| Parameters | Description |
|---|---|
style |
Defines the slideshow style. This parameter cannot be left blank. You can set the style as default or gravity |
autoplay |
Set it to true to have the slideshow play automatically. Otherwise, set to false to stop the automatic play. |
animation |
Set the transition animation between slides |
transition_duration |
set the duration for the transition animation |
autoplay_interval |
Set the duration between switching slideshow items |
kenburns |
Set it to true or false to enable/disable kenburns effect to an image |
[line_break/]
See the UIkit documentation on the available animations available for the slideshow component
[line_break/] [heading size=”h3″ style=”uk-module-title uk-margin-top”]Default Slideshow[/heading] [slideshow style=”default” autoplay=”true” animation=”scale” transition_duration=”500″ autoplay_interval=”10000″ kenburns=”false”] [slide][slider_img src=”images/demo/default/slideshow/1.jpg” width=”1280″ height=”565″ alt=”image”/][/slide] [slide][slider_img src=”images/demo/default/slideshow/2.jpg” width=”1280″ height=”565″ alt=”image”/][/slide] [slide][slider_img src=”images/demo/default/slideshow/3.jpg” width=”1280″ height=”565″ alt=”image”/][/slide] [slide_nav align=”center”] [slide_nav_item order=”0″/] [slide_nav_item order=”1″/] [slide_nav_item order=”2″/] [/slide_nav] [/slideshow] [badge style=”note uk-margin-top”]markup[/badge] [toggle_code open=”false” title=”Show code”] [slideshow style=”default” autoplay=”true” animation=”scale” transition_duration=”500″ autoplay_interval=”10000″ kenburns=”false”] [slide][slider_img src=”images/demo/default/slideshow/1.jpg” width=”1280″ height=”565″ alt=”image”/][/slide] [slide][slider_img src=”images/demo/default/slideshow/2.jpg” width=”1280″ height=”565″ alt=”image”/][/slide] [slide][slider_img src=”images/demo/default/slideshow/3.jpg” width=”1280″ height=”565″ alt=”image”/][/slide] [slide_nav align=”center”] [slide_nav_item order=”0″/] [slide_nav_item order=”1″/] [slide_nav_item order=”2″/] [/slide_nav] [/slideshow] [/toggle_code] [line_break/] [heading size=”h3″ style=”uk-module-title uk-margin-top”]Gravity Slideshow[/heading] [slideshow style=”gravity” autoplay=”true” animation=”scale” transition_duration=”500″ autoplay_interval=”10000″ kenburns=”true”] [slide] [slider_img src=”images/demo/default/slideshow/1.jpg” width=”1280″ height=”565″ alt=”image”/] [slide_caption] [heading size=”h3″]This is a title[/heading] [slide_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/slide_text] [button style=”default uk-button-large” href=”#” target=”_self”]Learn more[/button] [/slide_caption] [/slide] [slide] [slider_img src=”images/demo/default/slideshow/2.jpg” width=”1280″ height=”565″ alt=”image”/] [slide_caption] [heading size=”h3″]Another title[/heading] [slide_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.[/slide_text] [button style=”default uk-button-large” href=”#” target=”_self”]Learn more[/button] [/slide_caption] [/slide] [slide] [slider_img src=”images/demo/default/slideshow/3.jpg” width=”1280″ height=”565″ alt=”image”/] [slide_caption] [heading size=”h3″]A simple title[/heading] [slide_text]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. [/slide_text] [button style=”default uk-button-large” href=”#” target=”_self”]Learn more[/button] [/slide_caption] [/slide] [slide_nav] [slide_nav_item order=”0″/] [slide_nav_item order=”1″/] [slide_nav_item order=”2″/] [/slide_nav] [/slideshow] [badge style=”note uk-margin-top”]markup[/badge] [toggle_code open=”false” title=”Show code”] [slideshow style=”gravity” autoplay=”true” animation=”scale” transition_duration=”500″ autoplay_interval=”10000″ kenburns=”true”] [slide] [slider_img src=”images/demo/default/slideshow/1.jpg” width=”1280″ height=”565″ alt=”image”/] [slide_caption] [heading size=”h3″]This is a title[/heading] [slide_text]Lorem ipsum dolor amit[/slide_text] [button style=”default uk-button-large” href=”#” target=”_self”]Learn more[/button] [/slide_caption] [/slide] [slide] [slider_img src=”images/demo/default/slideshow/2.jpg” width=”1280″ height=”565″ alt=”image”/] [slide_caption] [heading size=”h3″]Another title[/heading] [slide_text]Lorem ipsum dolor amit[/slide_text] [button style=”default uk-button-large” href=”#” target=”_self”]Learn more[/button] [/slide_caption] [/slide] [slide] [slider_img src=”images/demo/default/slideshow/3.jpg” width=”1280″ height=”565″ alt=”image”/] [slide_caption] [heading size=”h3″]A simple title[/heading] [slide_text]Lorem ipsum dolor amit[/slide_text] [button style=”default uk-button-large” href=”#” target=”_self”]Learn more[/button] [/slide_caption] [/slide] [slide_nav] [slide_nav_item order=”0″/] [slide_nav_item order=”1″/] [slide_nav_item order=”2″/] [/slide_nav] [/slideshow] [/toggle_code] [line_break/] [heading size=”h3″ style=”uk-module-title uk-margin-top”]Testimonials in slideshow[/heading] [slideshow style=”scroller” autoplay=”true” animation=”scroll” transition_duration=”500″ autoplay_interval=”10000″ kenburns=”false”] [slide] [testimonial author=”Gary Long” title=”CEO” avatar=”images/demo/avatar/client-1-thumb.png” icon=”icon-grav-chat”]Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.[/testimonial] [/slide] [slide] [testimonial author=”Lori Carroll” title=”Chief Editor” avatar=”images/demo/avatar/client-2-thumb.png” icon=”icon-grav-chat”]Do not dream of the future, concentrate the mind on the present moment. Dream big. Go forward Never allow yourself to be made a victim. Accept no one’s definition.[/testimonial] [/slide] [slide] [testimonial author=”Paul Morgan” title=”Creative Designer” avatar=”images/demo/avatar/client-3-thumb.png” icon=”icon-grav-chat”]Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.[/testimonial] [/slide] [slide_nav align=”center”] [slide_nav_item order=”0″/] [slide_nav_item order=”1″/] [slide_nav_item order=”2″/] [/slide_nav] [/slideshow][line_break/] [badge style=”note uk-margin-top”]markup[/badge] [toggle_code open=”false” title=”Show code”] [slideshow style=”scroller” autoplay=”true” animation=”scroll” transition_duration=”500″ autoplay_interval=”10000″ kenburns=”false”] [slide] [testimonial author=”Gary Long” title=”CEO” avatar=”images/demo/avatar/client-1-thumb.png” icon=”icon-grav-chat”]Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy.[/testimonial] [/slide] [slide] [testimonial author=”Lori Carroll” title=”Chief Editor” avatar=”images/demo/avatar/client-2-thumb.png” icon=”icon-grav-chat”]Do not dream of the future, concentrate the mind on the present moment. Dream big. Go forward Never allow yourself to be made a victim. Accept no one’s definition.[/testimonial] [/slide] [slide] [testimonial author=”Paul Morgan” title=”Creative Designer” avatar=”images/demo/avatar/client-3-thumb.png” icon=”icon-grav-chat”]Everything should be as simple as it is, but not simpler; Believe that life is worth living and your belief will help create the fact. We help your ideas come to life.[/testimonial] [/slide] [slide_nav align=”center”] [slide_nav_item order=”0″/] [slide_nav_item order=”1″/] [slide_nav_item order=”2″/] [/slide_nav] [/slideshow] [/toggle_code]