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

"Adipiscing Appellatio Autem Dolore Esse Haero Hendrerit Ibidem Importunus Inhibeo Iriure Luctus Natu Neo Quis Ratis Secundum Si Sino Torqueo Tum Usitas Ut Validus Venio"

Picture of Sara Mason Kylie Michaels / @kyliemichaels

"Abigo Abluo Aliquip Augue Autem Commoveo Consectetuer Diam Eligo Eros Eu Eum Exerci Feugiat Ille Interdico Jugis Macto Magna Metuo Oppeto Pala Pertineo Populus Qui Quidne Roto Saepius Venio Vereor Vindico Vulputate"

Picture of Alex Jones Sara Mason / @kyliemichaels

"Abdo Accumsan Ad Antehabeo Capto Consectetuer Enim Euismod Feugiat Iaceo Ibidem Immitto Loquor Magna Meus Minim Mos Natu Neque Odio Oppeto Pecus Praesent Probo Quae Refero Tego Tum Ulciscor Uxor Voco Volutpat Vulputate Ymo Zelus"

Picture of Kylie Michaels Alex Jones / @kyliemichaels

"Aliquam Caecus Causa Comis Dignissim Distineo Huic Ideo Importunus Letalis Luctus Macto Nutus Occuro Praemitto Quibus Quidem Refero Refoveo Typicus"

Picture of Alex Jones Alex Jones / @timrice

"Abdo Cogo Conventio Defui Et Imputo Iriure Laoreet Metuo Nobis Obruo Oppeto Scisco Vulputate Wisi"

Picture of Sara Mason Sara Mason / @timrice

"Abigo Aliquam Amet Consectetuer Damnum Gilvus Haero Hos Inhibeo Nibh Os Patria Pneum Quae Ratis Tincidunt Vindico"

Picture of Tim Rice Mike Thompson / @saramason

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+

$ 19.95 /MO

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

Professional

$ 49.95 /MO

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

Business

$ 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