Skip to content

Elements:Carousels

Setup

Carousels are powered by the awesome OwlCarousel 2 plugin which offers excellent responsive carousels.

The trigger or wrapper element should have a data-toggle="owl-carousel" attribute and you can pass settings/options using data-owl-carousel-settings='{}' attribute. See "options" below for all options.

Making carousels responsive: include "responsive" settings within your data-owl-carousel-settings='{}' attribute to apply different settings per screenwidth. ie. data-owl-carousel-settings='{"margin":30, "responsive":{ "0":{"items":1}, "600":{"items":3}}, "loop":true }' .

Browser support: All modern browsers, not supported by IE9.


Projects Carousel

2 items on wider screens, 1 item on mobile with 1px margin, no paginations and .owl-nav-over & .owl-nav-over-lg classes added to wrapper to put navigation over the top of the carousel.


Testimonials Carousel

"Abdo Aliquam Autem Damnum Duis Esse Facilisi Facilisis Gilvus Gravis Ibidem Ille Immitto Interdico Iriure Iustum Macto Metuo Modo Nostrud Pagus Paratus Pertineo Praesent Premo Ratis Refoveo Singularis Torqueo Typicus Ullamcorper Valde Validus Veniam Vindico"

Picture of Alexander Vanjuvic Kylie Michaels / @timrice

"Euismod Exputo Facilisis Gemino Genitus Iaceo Letalis Lucidus Macto Modo Neo Pneum Quadrum Suscipere Typicus Vindico"

Picture of Sara Mason Kylie Michaels / @alexandervanjuvic

"Aliquip Autem Dignissim Distineo Dolor Imputo Loquor Mauris Natu Nutus Patria Pneum Quadrum Quis Sagaciter Typicus Valde Vulpes Vulputate"

Picture of Kylie Michaels Tim Rice / @kyliemichaels

"Antehabeo Aptent Cui Dolore Dolus Enim Eu Euismod Facilisis Feugiat Gemino Genitus Huic Immitto Incassum Jumentum Letalis Luctus Minim Modo Nimis Nisl Nulla Occuro Odio Plaga Qui Refoveo Sit Tincidunt Vicis Vulputate Zelus"

Picture of Mike Thompson Kylie Michaels / @alexandervanjuvic

"Abluo Ad Blandit Caecus Comis Consectetuer Diam Dolus Et Ex Gilvus Jugis Jumentum Loquor Magna Nibh Nobis Nulla Nunc Odio Olim Paulatim Proprius Quae Quibus Sed Similis Ullamcorper Utrum Valde Velit Vicis Vindico Vulpes"

Picture of Sara Mason Mike Thompson / @alexjones

"Autem Conventio Diam Distineo Dolore Eligo Esca Eu Exerci Gilvus Imputo Laoreet Lobortis Lucidus Occuro Qui Ratis Refero Sagaciter Scisco Si Similis Suscipere Tamen Ullamcorper Utinam Utrum Velit Vereor Virtus"

Picture of Mike Thompson Alex Jones / @kyliemichaels

Customers Logo Carousel

4 items per carousel row and image lazy loading.


Blog Posts Carousel

1 blog post on mobile, 2 blogs posts from 600px screenwidth and 3 blog post items from 1040px screenwidth with a 15px margin, no navigation, dots center.


Pricing Plan Carousel

Starter

Free!

  • 3 User Accounts
  • 3 Private Projects
  • Umlimited Public Projects
  • 5GB of space
Sign Up
Best Buy

Starter Plus

$ 19.95 /MO

  • 10 User Accounts
  • 10 Private Projects
  • Umlimited Public Projects
  • 15GB of space
Sign Up

Pro Plus

$ 49.95 /MO

  • 50 User Accounts
  • 50 Private Projects
  • Umlimited Public Projects
  • Unlimited space
Sign Up
Popular

Biz Plus

$ 199.95 /MO

  • Umlimited User Accounts
  • Umlimited Private Projects
  • Umlimited Public Projects
  • Unlimited space
Sign Up

Carousel with Image thumbnail navigation

Add the thumbnail images below to your HTML and wrap them in a data-owl-carousel-thumbs="CAROUSEL-TO-CONTROL" and that's it.


Slideshow Carousel with transitions

Also uses the .owl-nav-over-hover class to show navigation only on hover.

Project 1

Project 1

Project 1 description text.

Project 2

Project 2

Project 2 description text.

Project 3

Project 3

Project 3 description text.

Project 4

Project 4

Project 4 description text.

Project 5

Project 5

Project 5 description text.

Project 6

Project 6

Project 6 description text.

Project 7

Project 7

Project 7 description text.

Project 8

Project 8

Project 8 description text.

Project 9

Project 9

Project 9 description text.

Project 10

Project 10

Project 10 description text.


Timeline Carousel


Style Options

Add .owl-highlight-active to shrink & fade non-active items.

Add .owl-equalheight to make all items the same height.

Add .owl-overflow to make items overflow their wrapper.

Add .owl-nav-over to the wrapper to put navigation over the top of the carousel.

Add .owl-dots-center to center the pagination dots.


Options

items

Type: Number
Default: 3

The number of items you want to see on the screen.


margin

Type: Number
Default: 0

margin-right(px) on item.


loop

Type: Boolean
Default: false

Infinity loop. Duplicate last and first items to get loop illusion.


center

Type: Boolean
Default: false

Center item. Works well with even an odd number of items.


mouseDrag

Type: Boolean
Default: true

Mouse drag enabled.


touchDrag

Type: Boolean
Default: true

Touch drag enabled.


pullDrag

Type: Boolean
Default: true

stage pull to edge.


freeDrag

Type: Boolean
Default: false

Item pull to edge.


stagePadding

Type: Number
Default: 0

Padding left and right on stage (can see neighbours).


merge

Type: Boolean
Default: false

Merge items. Looking for data-merge='{number}' inside item..


mergeFit

Type: Boolean
Default: true

Fit merged items if screen is smaller than items value.


autoWidth

Type: Boolean
Default: false

Set non grid content. Try using width style on divs.


startPosition

Type: Number/String
Default: 0

Start position or URL Hash string like '#id'.


URLhashListener

Type: Boolean
Default: false

Listen to url hash changes. data-hash on items is required.


Type: Boolean
Default: false

Show next/prev buttons.


rewind

Type: Boolean
Default: true

Go backwards when the boundary has reached.


Type: Array
Default: ['next','prev']

HTML allowed.


Type: String
Default: div

DOM element type for a single directional navigation link.


slideBy

Type: Number/String
Default: 1

Navigation slide by x. 'page' string can be set to slide by page.


dots

Type: Boolean
Default: true

Show dots navigation.


dotsEach

Type: Number/Boolean
Default: false

Show dots each x item.


dotData

Type: Boolean
Default: false

Used by data-dot content.


lazyLoad

Type: Boolean
Default: false

Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not <img>


lazyContent

Type: Boolean
Default: false

lazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. It is a nice options so i will work on it in the nearest feature.


autoplay

Type: Boolean
Default: false

Autoplay.


autoplayTimeout

Type: Number
Default: 5000

Autoplay interval timeout.


autoplayHoverPause

Type: Boolean
Default: false

Pause on mouse hover.


smartSpeed

Type: Number
Default: 250

Speed Calculate. More info to come..


fluidSpeed

Type: Boolean
Default: Number

Speed Calculate. More info to come..


autoplaySpeed

Type: Number/Boolean
Default: false

autoplay speed.


Type: Number/Boolean
Default: false

Navigation speed.


dotsSpeed

Type: Boolean
Default: Number/Boolean

Pagination speed.


dragEndSpeed

Type: Number/Boolean
Default: false

Drag end speed.


callbacks

Type: Boolean
Default: true

Enable callback events.


responsive

Type: Object
Default: empty object

Object containing responsive options. Can be set to false to remove responsive capabilities.


responsiveRefreshRate

Type: Number
Default: 200

Responsive refresh rate.


responsiveBaseElement

Type: DOM element
Default: window

Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.


video

Type: Boolean
Default: false

Enable fetching YouTube/Vimeo/Vzaar videos.


videoHeight

Type: Number/Boolean
Default: false

Set height for videos.


videoWidth

Type: Number/Boolean
Default: false

Set width for videos.


animateOut

Type: String/Boolean
Default: false

Class for CSS3 animation out.


animateInClass

Type: String/Boolean
Default: false

Class for CSS3 animation in.


fallbackEasing

Type: String
Default: swing

Easing for CSS2 $.animate.


info

Type: Function
Default: false

Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.


nestedItemSelector

Type: String/Class
Default: false

Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name.


itemElement

Type: String
Default: div

DOM element type for owl-item.


stageElement

Type: String
Default: div

DOM element type for owl-stage.


Type: String/Class/ID/Boolean
Default: false

Set your own container for nav.


dotsContainer

Type: String/Class/ID/Boolean
Default: false

Set your own container for nav.

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page