Carousel Shortcodes

Slide Images

  • Slide #1

  • Slide #2

  • Slide #3

    Get The Code

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

    [carousel_item]

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

    [/carousel_item]

    [carousel_item]

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

    [/carousel_item]

    [carousel_item]

    <img decoding="async" 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.

      • Slide #2

      • Sample Text Slide

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      Get The Code

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

      [carousel_item]

      [fluid_wrapper width="636" height="212"]<iframe loading="lazy" width="377" height="212" src="http://www.youtube.com/embed/YE7VzlLtp-4?feature=oembed&amp;wmode=transparent&amp;autohide=1&amp;autoplay=0&amp;disablekb=0&amp;fs=1&amp;loop=0&amp;enablejsapi=1&amp;rel=0&amp;controls=2&amp;showinfo=0&amp;wmode=transparent&amp;autohide=2&amp;autoplay=0&amp;disablekb=0&amp;fs=1&amp;loop=0&amp;enablejsapi=1&amp;rel=0&amp;controls=2&amp;showinfo=1" frameborder="0" allowfullscreen></iframe>[/fluid_wrapper]

      [/carousel_item]

      [carousel_item]

      <img decoding="async" 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)