You can use several slideshows within the content of your page or post. Build your own slideshow easily by just using some shortcode attributes.
At the bottom of the page you’ll find an overview of all attributes available.
Slideshow – default
Copy the code below and insert into your post/page to add a slideshow. You’ll need to give your slideshows different IDs when using multiple slideshows on your page.
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
And here comes your text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
Tell the world. This is the place for your text. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
...read more
[cc_slideshow id="1"]
Slideshow – display posts from a certain category
Choose a certain category by just adding category_name=”your-category-name” into the shortcode.
And here comes your text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...read more
Tell the world. This is the place for your text. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
...read more
This is the text excerpt of your post content. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
...read more
Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
...read more
[cc_slideshow id="2" category_name="example-posts"]
Slideshow – display pages or custom post types
You can also display pages or custom post types in your slideshow. This feature is just for the slideshow shortcode at this moment.
This example has also caption deactivated, which is mostly preferred for showing pages or custom post types in slideshows.
for pages: [cc_slideshow id="2-2" page_id="1158,1142,1326,1135" caption="off"]
for custom post types: [cc_slideshow id="2-3" post_type="your-post-type-name" page_id="1,2,3,4"]
Slideshow – without navigation
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
And here comes your text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
Tell the world. This is the place for your text. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
...read more
[cc_slideshow id="3" slider_nav="off"]
Slideshow – without navigation, full size
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
And here comes your text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
Tell the world. This is the place for your text. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
...read more
[cc_slideshow id="33" slider_nav="off" caption="on" caption_width="1004" width="1004" height="250"]
Without navigation and caption, full size wide
[cc_slideshow id="5" slider_nav="off" caption="off" width="1004" height="250"]
Without navigation and caption, medium size wide
[cc_slideshow id="4" slider_nav="off" caption="off"]
Without navigation and caption, medium size
[cc_slideshow id="9" slider_nav="off" slider_nav_position="500" caption="off" width="500" height="372"]
With navigation, without caption, medium size, 6 posts
[cc_slideshow id="6" slider_nav="on" slider_nav_position="500" caption="off" width="500" height="372" amount="6"]
With navigation and caption, medium size, 6 posts
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
And here comes your text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
Tell the world. This is the place for your text. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
[cc_slideshow id="8" slider_nav="on" slider_nav_position="500" caption="on" caption_height="100" caption_width="500" caption_top="272" width="500" height="372" amount="6"]
Just an example for custom sized caption
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
And here comes your text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
Tell the world. This is the place for your text. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
...read more
[cc_slideshow id="11" slider_nav="off" slider_nav_position="500" caption="on" caption_height="200" caption_width="200" caption_top="0" width="500" height="372"]
Just an example for reflection
You can add a reflection to your images by just adding reflect=”reflect” into the slideshow shortcode.
[cc_slideshow id="12" slider_nav="off" caption="off" width="200" height="200" reflect="reflect"]
Customize your slider navigation!
Below are some examples with customized slider navigation. You can use them in all slideshow shortcodes.
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
And here comes your text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
Tell the world. This is the place for your text. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
...read more
[cc_slideshow id="16" background="000000" slider_nav_color="181818" slider_nav_hover_color="333333" slider_nav_selected_color="333333" slider_nav_font_color="ffffff"]
Sliding time
You can adjust the time a post is being shown by adding time_in_ms=”8000″ inside your shortcode. You can use it in all slideshow shortcodes. Below is an example with extra long sliding time.
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
And here comes your text. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
...read more
This is the post description. The image is not inserted into this text, it is defined as “featured image” (under the tags-field). You can use post templates to predefine the layout of your posts. For example with the featured image on the left or right or above. You can also choose if to display the
...read more
Tell the world. This is the place for your text. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
...read more
[cc_slideshow id="17" time_in_ms="10000"]
Attributes for slideshow shortcode
id=
- “1″ – always enter a different number, when using multiple slideshows on one page
category_name=
- “your-category-name” – name of the category you would like to show
page_id=
- “1,123,456″ – the page IDs you’d like to show, separated by comma
post_type=
- “page” – If you’d like show pages or custom post types, write “page” or the name of your custom post type, and add the page IDs (see above).
amount=
- “4″ – the amount of posts being shown, just enter a number. Just for the full width slider.
orderby=
- “asc” – you can define the order. note: looks weird with preview, better just use it for the full width slider.
- orderby = author
- orderby = date
- orderby = title
- orderby = modified
- orderby = menu_order used most often for Pages (Order field in the Edit Page -> Attributes box) and attachments (the integer fields in the Insert / Upload Media -> Gallery dialog), but could be used for any post type with distinct menu_order values (they all default to 0).
- orderby = parent
- orderby = ID
- orderby = rand
- orderby = meta_value Note: A meta_key=keyname must also be present in the query. Note also that the sorting will be alphabetical which is fine for strings (i.e. words), but can be unexpected for numbers (e.g. 1, 3, 34, 4, 56, 6, etc, rather than 1, 3, 4, 6, 34, 56 as you might naturally expect).
- orderby = meta_value_num – Order by numeric meta value (available with Version 2.8)
- orderby = none – No order (available with Version 2.8)
- orderby = comment_count – (available with Version 2.9)
width=
- “500″ – the slider width in px, just enter a number
height=
- “300″ – the slider height in px, just enter a number
slider_nav=
- “on” – show a preview of the posts
- “off” – just the sliding images
caption=
- “on” – show caption of the posts. when slider is not medium width, the caption width needs to be specified.
- “off” – no caption, just the images
caption_width=
- “500″ – caption width in pixel, just enter a number
caption_height=
- “500″ – caption width in pixel, just enter a number
caption_top=
- “500″ – caption position from top in pixel, just enter a number
reflect=
- “reflect” – add a reflection to the slider image
background=
- “ffffff” – change the background color of the slider, hex-code, just enter a number.
slider_nav_color=
- “ededed” – change the background color of the slider navigation, hex-code, just enter a number.
slider_nav_hover_color=
- “e3e3e3″ – change the background color of the post in slider navigation when mouse moves over, hex-code, just enter a number.
slider_nav_selected_color=
- “dddddd” – change the background color of the selected post in slider navigation, hex-code, just enter a number.
slider_nav_font_color=
- “888888″ – change the font color of the slider navigation, hex-code, just enter a number.
time_in_ms=
- “5000″ – the time a post is being shown, in ms, just enter a number. Default is 5000.
Recent Comments