Carousel Shortcodes

Slide Images

    Get The Code

    [carousel coin_nav="standard" direction_nav="standard" progress_bar="standard"]

    [carousel_item]

    <img src="/wp-content/uploads/2013/04/viewport_slide_3_v01-636x212.jpg" alt="Slide #1" />

    [/carousel_item]

    [carousel_item]

    <img src="/wp-content/uploads/2013/04/viewport_slide_3_v01-636x212.jpg" alt="Slide #2" />

    [/carousel_item]

    [carousel_item]

    <img src="/wp-content/uploads/2013/04/viewport_slide_1_v01-636x212.jpg" alt="Slide #3" />

    [/carousel_item]

    [/carousel]

    Slide Any Content

    • The carousel can be used as a part of any columns layout. It will properly adjust to the surrounding content.

      Get The Code

      [carousel coin_nav="none" direction_nav="standard" progress_bar="none"]

      [carousel_item]

      <span class="embed-youtube" style="text-align:center; display: block;"><iframe class='youtube-player' type='text/html' width='686' height='416' src='http://www.youtube.com/embed/YE7VzlLtp-4?version=3&#038;rel=1&#038;fs=1&#038;autohide=2&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;wmode=transparent' allowfullscreen='true' style='border:0;'></iframe></span>

      [/carousel_item]

      [carousel_item]

      <img src="/wp-content/uploads/2013/04/viewport_slide_4_v01-636x212.jpg" alt="Slide #2" />

      [/carousel_item]

      [carousel_item]

      <div style="width: 626px; height: 212px;"> <h3>Sample Text Slide</h3>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      </div>

      [/carousel_item]

      [/carousel]

      Customize Your Carousel

      • Show/Hide Coin Navigation
      • Show/Hide Direction Navigation (Next/Prev)
      • Show/Hide Progress Bar

      [carousel] Shortcode documentation

      • id
        The id attribute specifies an id for an HTML element.
        It must be unique within the HTML document.
        (Mainly for additional styling/scripting purposes)
      • class
        The class attribute specifies a class name for an HTML element.
        (Mainly for additional styling/scripting purposes)
      • coin_nav
        Enable Coin Navigation
        Available Options:
        • none - hide
        • standard - show
      • direction_nav
        Enable Next/Prev Navigation
        Available Options:
        • none - hide
        • standard - show
      • autoplay
        Available Options:
        • standard - yes
        • none - no
      • timeout
        The time carousel will pause between transitions (in miliseconds).

      [carousel_item] Shortcode documentation

      • id
        The id attribute specifies an id for an HTML element.
        It must be unique within the HTML document.
        (Mainly for additional styling/scripting purposes)
      • class
        The class attribute specifies a class name for an HTML element.
        (Mainly for additional styling/scripting purposes)