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

"Appellatio Aptent At Augue Autem Blandit Causa Cogo Dolore Eu Feugiat Immitto Importunus Jugis Lobortis Mauris Modo Olim Paratus Pertineo Praesent Premo Quia Refero Tamen Usitas Utinam Valetudo Vel Velit Vulputate"

Picture of Alexander Vanjuvic Kylie Michaels / @saramason

"Abdo Amet Brevitas Consequat Cui Ea Eligo Erat Eum Ex Exerci Iriure Iusto Laoreet Neque Nibh Nisl Nobis Pagus Quadrum Roto Saluto Scisco Secundum Suscipit Tincidunt Ut Venio Vero Vulputate"

Picture of Mike Thompson Mike Thompson / @timrice

"Abluo Bene Camur Comis Commodo Cui Decet Esca Exputo Hos Inhibeo Jumentum Letalis Lobortis Loquor Lucidus Minim Nutus Plaga Quia Quidem Roto Uxor Valde Velit Zelus"

Picture of Sara Mason Alex Jones / @mikethompson

"Abbas Abigo Accumsan Amet Appellatio Caecus Consectetuer Consequat Distineo Molior Nisl Nulla Obruo Pagus Quia Quis Rusticus Si Utrum Velit Venio Vereor Vulpes"

Picture of Mike Thompson Alexander Vanjuvic / @timrice

"Autem Caecus Diam Eum Exerci Gemino Inhibeo Interdico Nostrud Populus Saluto Singularis Te Tincidunt Vel Volutpat Vulputate"

Picture of Alexander Vanjuvic Kylie Michaels / @alexjones

"Abluo Accumsan Augue Cui Defui Elit Erat Eros Esse Ex Gravis Huic Incassum Interdico Luctus Mauris Neo Populus Praemitto Premo Quis Ratis Refoveo Roto Sed Te Veniam Vicis Vindico Voco"

Picture of Sara Mason Alex Jones / @timrice

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