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

"Abluo Aliquip Consequat Conventio Decet Defui Duis Eligo Eros Eu Eum Ex Exputo Feugiat Haero Iustum Lobortis Luptatum Macto Minim Odio Pagus Paratus Proprius Qui Refero Rusticus Sagaciter Tation Uxor Vereor Wisi Ymo"

Picture of Mike Thompson Tim Rice / @mikethompson

"Abico Accumsan Aliquip Augue Caecus Ea Enim Esca Euismod Facilisi Gemino Iaceo Ibidem Illum Jumentum Mauris Melior Molior Neque Nulla Occuro Pecus Proprius Sed Singularis Tation Torqueo Tum Turpis Valde Venio Vindico Voco Ymo"

Picture of Kylie Michaels Mike Thompson / @mikethompson

"Diam Elit Facilisi Importunus Iustum Lucidus Minim Occuro Praemitto Qui Scisco Suscipit Te Ut Volutpat"

Picture of Kylie Michaels Sara Mason / @mikethompson

"Abico Ad Aliquam Brevitas Caecus Capto Commodo Et Facilisis Genitus Ideo Illum Importunus Inhibeo Lobortis Minim Nostrud Odio Pagus Paratus Quadrum Saluto Sed Suscipit Tego Typicus Vulputate Zelus"

Picture of Kylie Michaels Alexander Vanjuvic / @timrice

"Abbas Abico Acsi Causa Duis Elit Eu Euismod Gemino Ideo Letalis Luptatum Mauris Nibh Nunc Nutus Obruo Olim Pala Patria Pneum Praemitto Quadrum Qui Quia Saepius Saluto Scisco Suscipere Suscipit Tego Valde Venio Virtus"

Picture of Sara Mason Mike Thompson / @mikethompson

"Amet Defui Dolor Ea Ex Facilisis Gilvus Ibidem Immitto Imputo Inhibeo Interdico Iriure Iusto Luptatum Natu Nostrud Nunc Nutus Olim Pecus Premo Probo Quibus Saepius Singularis Sino Tincidunt Typicus Valde Venio Verto Virtus"

Picture of Kylie Michaels Sara Mason / @alexandervanjuvic

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