Halaman 15 dari 24
Slideshow
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.
Show code
[slideshow style="gravity" autoplay="true" animation="scale" transition_duration="500" autoplay_interval="10000" kenburns="false"]
<!-- slide 1 -->
[slide]
[slider_img src="/web/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="/web/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]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 |
See the UIkit documentation on the available animations available for the slideshow component
Default Slideshow
markup
Show code
[slideshow style="default" autoplay="true" animation="scale" transition_duration="500" autoplay_interval="10000" kenburns="false"]
[slide][slider_img src="/web/images/demo/default/slideshow/1.jpg" width="1280" height="565" alt="image"/][/slide]
[slide][slider_img src="/web/images/demo/default/slideshow/2.jpg" width="1280" height="565" alt="image"/][/slide]
[slide][slider_img src="/web/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]
Gravity Slideshow
markup
Show code
[slideshow style="gravity" autoplay="true" animation="scale" transition_duration="500" autoplay_interval="10000" kenburns="true"]
[slide]
[slider_img src="/web/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="/web/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="/web/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]
Testimonials in slideshow
-
CEO
Believe in yourself! Have faith in your abilities! Without a humble but reasonable confidence in your own powers you cannot be successful or happy. -
Chief Editor
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. -
Creative Designer
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.
markup
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]
