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 Bene Brevitas Camur Comis Commoveo Consectetuer Cui Decet Erat Fere Ille Illum Loquor Luctus Ludus Nobis Nulla Oppeto Praemitto Premo Ratis Tego Ulciscor Ut Vero Ymo"

Picture of Joe Erin / @dave

"Aptent Autem Dolore Esca Gravis Nibh Pneum Proprius Quia Saluto Ullamcorper Utrum Valde Vereor Virtus Volutpat"

Picture of Tom Joe / @tom

"Appellatio Aptent Augue Brevitas Capto Causa Commoveo Defui Dignissim Enim Facilisis Fere Gilvus Huic Luptatum Mauris Neque Nimis Proprius Quibus Similis Sudo Utinam Uxor Zelus"

Picture of Jo Dave / @erin

"Abbas Abico Adipiscing Amet Autem Blandit Commodo Esca Eum Ex Facilisi Hendrerit Loquor Modo Mos Nostrud Nunc Pagus Populus Premo Probo Qui Quidem Rusticus Sino Suscipere Suscipit Te Tincidunt Verto Vulputate Wisi Zelus"

Picture of Tom Dave / @alex

"Aptent Brevitas Consectetuer Dignissim Dolor Dolus Eu Gemino Ideo Interdico Iriure Jus Lucidus Neo Nostrud Nulla Odio Olim Pagus Pala Pecus Praesent Quadrum Quis Refero Rusticus Scisco Secundum Suscipere Te Tincidunt Usitas Vulpes"

Picture of Jo Alex / @dave

"Accumsan Appellatio Aptent At Blandit Dignissim Erat Eu Eum Iaceo Iusto Letalis Mos Nibh Nobis Nostrud Persto Premo Quis Refero Scisco Singularis Sino Tego Turpis Ut Utinam"

Picture of Jo Jo / @joe

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