Introduction
The slider shortcode has multiple different slider types to choose from. The different slider types have their own strengths and limitations. Each slider is mobile responsive.
Basic Slider
The basic slider type cycles through the slides. Each slide can contain different types of content (ex. image, video, html, shortcodes, etc.) and can be different sizes. The slider has the option to pause when the mouse is hovered over and you can control the speed. However, there aren’t controls that allow the user to control the slider.
Owl Carousel
The Owl Carousel slider is the most feature rich slider type. It includes navigation controls which can be set to show in eight different locations. You can also control the size, icon, color, text, border radius, and more for the navigation controls.
The Owl Carousel allows you to control how many items to show for different screen sizes. If you choose to show more than one item, the slides will automatically be paged with the option to show the paging navigation as bullets or numbers.
Flexslider
The Flexslider is a similar to the Owl Carousel but with less options. It is a good in-between slider that works better in certain situations.
When showing more than one item at a time, the Flexslider is less forgiving than the Owl Slider and requires you to specify the width of the items.
Explore More Shortcodes
- Alert
- Animated Popular
- Animated Image
- Animated Scroll New
- Audio
- Badge
- Blockquote
- Blog
- Blur New
- Books
- Button
- Chart
- Clients
- Code
- Collapsibles
- Content Box
- Content Section Popular
- Counter
- Coupons
- Custom Post Type
- Definitions
- Device Mockups
- Divider Popular
- Dropcap
- Emphasis
- Events
- FAQ
- Filler
- Flip Box Popular
- Fullscreen Video
- Gallery Popular
- Google Docs Viewer
- Guests
- Heading
- Highlight
- Hover Box
- Horizontal Ruler
- Icon Popular
- Icon List
- If New
- Image
- Image Compare
- Jobs
- Label
- Lead
- Lightbox
- Locations
- Map
- Masonry
- Members
- Menu
- Post Meta Data
- Movies
- Music
- News
- Overlay Popular
- Panel New
- Parallax Scene Popular
- Permalink
- Person
- Popover
- Portfolio
- Post Fields
- Post Media
- Pricing Table
- Progress
- Project
- Promotional Box
- QR Code
- Quotes
- Recent Books
- Recent Clients
- Recent Coupons
- Recent Events
- Recent Jobs
- Recent Locations
- Recent Movies
- Recent Music
- Recent News
- Recent Portfolios
- Recent Posts
- Recent Projects
- Recent Quotes
- Recent Recipes
[intense_content_section]
<h2>Introduction</h2>
The slider shortcode has multiple different slider types to choose from. The different slider types have their own strengths and limitations. Each slider is mobile responsive.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Basic Slider</h2>
The basic slider type cycles through the slides. Each slide can contain different types of content (ex. image, video, html, shortcodes, etc.) and can be different sizes. The slider has the option to pause when the mouse is hovered over and you can control the speed. However, there aren't controls that allow the user to control the slider.
[intense_row padding_top="0"]
[intense_column size="2" medium_size="2"][/intense_column]
[intense_column size="8" medium_size="8"]
[intense_slider type="basic" speed="3000"]
[intense_slide]
[intense_image image="2180" size="postWide" title="nightlife"]
[/intense_slide]
[intense_slide]
[intense_image image="2184" size="postWide" title="nightlife"]
[/intense_slide]
[intense_slide]
[intense_image image="2181" size="postWide" title="nightlife"]
[/intense_slide]
[/intense_slider]
[/intense_column]
[intense_column size="2" medium_size="2"][/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section]
<h2>Owl Carousel</h2>
The Owl Carousel slider is the most feature rich slider type. It includes navigation controls which can be set to show in eight different locations. You can also control the size, icon, color, text, border radius, and more for the navigation controls.
The Owl Carousel allows you to control how many items to show for different screen sizes. If you choose to show more than one item, the slides will automatically be paged with the option to show the paging navigation as bullets or numbers.
[intense_slider type="owl-carousel" navigation_prev_text="Previous" navigation_next_text="Next" items_tablet="2" items_mobile="2"]
[intense_slide][intense_image image="2180" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2184" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2181" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2185" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="780" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="781" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="779" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="776" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="771" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="759" size="small240" title="nightlife"][/intense_slide]
[/intense_slider]
[intense_slider type="owl-carousel" items="3" items_desktop="3" items_desktop_small="2" items_tablet="1" navigation_position="middleoutside" navigation_size="medium" navigation_color="#fff" navigation_font_color="primary" navigation_pagination_type="numbers"]
[intense_slide][intense_image image="2180" size="medium500" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2184" size="medium500" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2181" size="medium500" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2185" size="medium500" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="780" size="medium500" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="781" size="medium500" title="nightlife"][/intense_slide]
[/intense_slider]
[intense_row padding_top="0"]
[intense_column size="2" medium_size="2"][/intense_column]
[intense_column size="8" medium_size="8"]
[intense_slider type="owl-carousel" items="1" items_desktop="1" items_desktop_small="1" items_tablet="1 navigation_position="bottomright" navigation_pagination_type="none" navigation_prev_border_radius="50%" navigation_next_border_radius="50%" navigation_prev_icon="double-angle-left" navigation_next_icon="double-angle-right"]
[intense_slide][intense_image image="2185" size="large1024" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="780" size="large1024" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="781" size="large1024" title="nightlife"][/intense_slide]
[/intense_slider]
[/intense_column]
[intense_column size="2" medium_size="2"][/intense_column]
[/intense_row]
[/intense_content_section]
[intense_content_section size="full"]
<div class="intense container">In this example we use the Owl Carousel in a full width content section. This is good for showing product images, promotional materials, and more.</div>
[intense_slider type="owl-carousel" items="1" items_desktop="1" items_desktop_small="1" items_tablet="1" navigation_position="middleoutside" navigation_size="large" navigation_color="#ffffff" navigation_font_color="#666" navigation_pagination_type="none"]
[intense_slide]
[intense_row padding_top="30"]
[intense_column size="2" medium_size="2"][/intense_column]
[intense_column size="8" medium_size="8"]
[intense_image image="2184" size="postExtraWide" title="Photography"]
[/intense_column]
[intense_column size="2" medium_size="2"][/intense_column]
[/intense_row]
[/intense_slide]
[intense_slide]
[intense_row padding_top="30"]
[intense_column size="2" medium_size="2"][/intense_column]
[intense_column size="8" medium_size="8"]
[intense_image image="2181" size="postExtraWide" title="Photography"]
[/intense_column]
[intense_column size="2" medium_size="2"][/intense_column]
[/intense_row]
[/intense_slide]
[intense_slide]
[intense_row padding_top="30"]
[intense_column size="2" medium_size="2"][/intense_column]
[intense_column size="8" medium_size="8"]
[intense_image image="781" size="postExtraWide" title="Photography"]
[/intense_column]
[intense_column size="2" medium_size="2"][/intense_column]
[/intense_row]
[/intense_slide]
[/intense_slider]
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed" ]
<h2>Flexslider</h2>
The Flexslider is a similar to the Owl Carousel but with less options. It is a good in-between slider that works better in certain situations.
[intense_row padding_top="0"]
[intense_column size="2" medium_size="2"][/intense_column]
[intense_column size="8" medium_size="8"]
[intense_slider transition="goDown"]
[intense_slide][intense_image image="2185" size="large1024" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="780" size="large1024" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="781" size="large1024" title="nightlife"][/intense_slide]
[/intense_slider]
[/intense_column]
[intense_column size="2" medium_size="2"][/intense_column]
[/intense_row]
When showing more than one item at a time, the Flexslider is less forgiving than the Owl Slider and requires you to specify the width of the items.
[intense_slider item_width="240" ]
[intense_slide][intense_image image="2180" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2184" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2181" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="2185" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="780" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="781" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="779" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="776" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="771" size="small240" title="nightlife"][/intense_slide]
[intense_slide][intense_image image="759" size="small240" title="nightlife"][/intense_slide]
[/intense_slider]
[/intense_content_section]
[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]