Image slider
<strong>Image slider</strong> [su_content_slider effect="fadeUp" autoplay="3" style="light"] [su_content_slide]<a href="https://getshortcodes.com/shortcodes/content_slider/"><img src="https://getshortcodes.com/wp-content/uploads/2017/08/slider-image-1.jpg" height="426" /></a>[/su_content_slide] [su_content_slide]<a href="https://getshortcodes.com/shortcodes/content_slider/"><img src="https://getshortcodes.com/wp-content/uploads/2017/08/slider-image-2.jpg" /></a>[/su_content_slide] [su_content_slide]<a href="https://getshortcodes.com/shortcodes/content_slider/"><img src="https://getshortcodes.com/wp-content/uploads/2017/08/slider-image-3.jpg" /></a>[/su_content_slide] [/su_content_slider]
<strong>Panels slider</strong> [su_content_slider] [su_content_slide] [su_panel]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum[/su_panel] [/su_content_slide] [su_content_slide] [su_panel]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum[/su_panel] [/su_content_slide] [su_content_slide] [su_panel]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium dolor, sed pellentesque nisl imperdiet non. Aliquam dignissim egestas risus, sit amet vestibulum metus condimentum[/su_panel] [/su_content_slide] [/su_content_slider]
<strong>Mixed content</strong> [su_content_slider effect="goDown" autoplay="0" style="dark" pages="yes"] [su_content_slide] [su_spoiler title="Spoiler shortcode" style="fancy" icon="plus-square-1"]Hidden content[/su_spoiler] [/su_content_slide] [su_content_slide] [su_service title="Service shortcode" icon="icon: star" icon_color="#fccb00"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis. Donec molestie tempor mattis. Sed elementum, est vitae tincidunt faucibus, metus dui lobortis orci, non auctor ipsum elit quis nunc. Integer nec mattis nunc, eu dapibus nisl. Proin in eleifend lorem. Praesent mattis eros in orci aliquet fermentum.[/su_service] [su_box title="Box shortcode" box_color="#dddddd" title_color="#393939"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ligula libero, placerat ac pellentesque eget, adipiscing eu sapien. In venenatis, orci sed fringilla eleifend, nulla urna egestas arcu, quis consectetur felis purus sed metus. Quisque convallis lobortis neque, vitae rutrum urna mattis quis.[/su_box] [/su_content_slide] [su_content_slide] [su_row][su_column size="1/2"] <h3>YouTube video</h3> [su_youtube url="http://www.youtube.com/watch?v=DR2c266yWEA"] [/su_column][su_column size="1/2"] <h3>Google map</h3> [su_gmap] [/su_column][/su_row] [/su_content_slide] [/su_content_slider]
This shortcode is available in Shortcodes Ultimate Pro
Description
This is a very powerful shortcode, which allows you to create a slider from almost everything. You can create slides from any HTML markup or even other shortcodes.
Options
[su_content_slider] – slider container
| Option name | Possible values | Default value |
|---|---|---|
| style Choose slider skin | default (Default) dark (Dark) light (Light) | default |
| effect Choose transition animation | slide (Slide) fade (Fade) fadeUp (Fade Up) backSlide (Back Slide) goDown (Go Down) | slide |
| arrows Show left/right arrows navigation | no (Never) hover (On hover) yes (Always) | yes |
| pages Show pagination navigation | no (Never) hover (On hover) yes (Always) | no |
| autoplay Specify autoplay interval (seconds). Set to 0 to disable autoplay | Number from 0 to 60 | 5 |
| class Additional CSS class name(s) separated by space(s) | CSS class name(s) separated by space(s) | – none – |
[su_content_slide] – single slide
| Option name | Possible values | Default value |
|---|---|---|
| class Additional CSS class name(s) separated by space(s) | CSS class name(s) separated by space(s) | – none – |
Photos by Matt Palmer
Helpful?
🤝 Thank you!