Available with Extra Shortcodes add-on.

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.

Photos by Matt Palmer

Image slider

Panels slider

Mixed content

<h4>Image slider</h4>
[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/sites/2/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/sites/2/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/sites/2/2017/08/slider-image-3.jpg" /></a>[/su_content_slide]
[/su_content_slider]
<h4>Panels slider</h4>
[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]
<h4>Mixed content</h4>
[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]

[su_content_slider]

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]

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