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.




[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.




[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




[cc_slideshow id="3" slider_nav="off"]


Slideshow – without navigation, full size




[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




[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




[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.




[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.




[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.