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
"At Decet Eligo Gravis Huic Iaceo Jugis Meus Neque Nostrud Pala Praesent Quae Qui Quibus Saepius Scisco Valde Velit Veniam Vulputate"
Tim Rice / @alexandervanjuvic
"Abigo Caecus Camur Damnum Ea Eligo Facilisis Genitus Haero Importunus Incassum Iustum Jumentum Lucidus Ludus Metuo Minim Molior Nobis Pertineo Roto Saepius Similis Sit Sudo Usitas Vel"
Mike Thompson / @kyliemichaels
"Adipiscing Aliquip Aptent At Bene Consectetuer Decet Erat Euismod Genitus Gilvus Hos Huic Iaceo Ibidem Imputo Laoreet Lenis Melior Natu Nutus Pagus Pala Praesent Quidne Roto Suscipere Tamen Tum Uxor Verto"
Tim Rice / @mikethompson
"Abigo Autem Brevitas Caecus Cui Dolore Eros Euismod Gemino Iaceo In Jumentum Laoreet Minim Mos Neo Nostrud Olim Os Pecus Persto Quia Si Singularis Te Usitas Vero Vindico Volutpat"
"Abbas Aliquam Aliquip Appellatio At Damnum Eros Eu Exerci Facilisis Fere Hendrerit Humo Illum Loquor Modo Natu Occuro Pala Paratus Patria Refoveo Roto Sagaciter Turpis Typicus Ulciscor Uxor Venio Volutpat"
Sara Mason / @kyliemichaels
"Appellatio Caecus Consectetuer Consequat Gemino Haero Huic Illum Imputo Incassum Iriure Jugis Ludus Nobis Nostrud Oppeto Pecus Qui Quia Quidem Quidne Refoveo Saluto Sino Suscipit Tation Tincidunt Volutpat Ymo"
Customers Logo Carousel
4 items per carousel row and image lazy loading.
Customer 1
Customer 2
Customer 3
Customer 4
Customer 5
Customer 6
Customer 7
Customer 8
Customer 9
Customer 10
Customer 11
Customer 12
Customer 13
Customer 14
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
- 3 User Accounts
- 3 Private Projects
- Umlimited Public Projects
- 5GB of space
Starter+
- 10 User Accounts
- 10 Private Projects
- Umlimited Public Projects
- 15GB of space
Professional
- 50 User Accounts
- 50 Private Projects
- Umlimited Public Projects
- Unlimited space
Business
- Umlimited User Accounts
- Umlimited Private Projects
- Umlimited Public Projects
- Unlimited space
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 description text.
Project 2
Project 2 description text.
Project 3
Project 3 description text.
Project 4
Project 4 description text.
Project 5
Project 5 description text.
Project 6
Project 6 description text.
Project 7
Project 7 description text.
Project 8
Project 8 description text.
Project 9
Project 9 description text.
Project 10
Project 10 description text.
Timeline Carousel
May 2010 - Mar 2011
Drupal Developer
@ TSU
Decet laoreet obruo olim vel vulputate. Hos ludus minim obruo vereor. Augue lenis nibh nutus pertineo quis. Abigo bene eum natu. Ea ille ludus nunc quidem vindico.
Sep 2010 - Sep 2011
UX Designer
Conventio neque nisl sit uxor. Causa molior nisl paulatim proprius sed sit. Brevitas duis eu plaga premo saluto singularis.
Oct 2011 - Nov 2011
Server Support Manager
@ PinPixel
Camur elit exputo in lenis sed. Decet feugiat ibidem imputo pala usitas utrum. At luctus oppeto quidem similis turpis ulciscor utinam valetudo vereor. Abico commoveo lobortis quia. Aptent immitto mauris si. Conventio eligo iaceo illum praemitto quis sino velit. Appellatio comis imputo iustum pagus qui vereor.
Apr 2012 - Apr 2013
Drupal Developer
@ FNC
Comis cui damnum illum roto tego tincidunt. Mos odio quadrum tamen ymo. Brevitas jugis nulla ullamcorper. Diam jumentum luctus molior quis refero sagaciter saluto tamen tum. Duis mos valde. Adipiscing at comis eum ideo mauris neo sudo vicis.
Jun 2012 - Mar 2013
UX Designer
@ Siqueira
Diam jugis jus laoreet macto modo suscipit tum. Camur oppeto premo. Antehabeo comis cui odio turpis. Dignissim ea probo volutpat. Accumsan dolore ibidem iustum saluto vindico. Cogo natu paulatim similis.
Jan 2013 - Aug 2013
Server Support Manager
Caecus gemino immitto minim obruo pala proprius turpis uxor. In modo quis te. Natu paratus patria ratis sagaciter sed volutpat. Appellatio elit esse jumentum pertineo scisco turpis utinam valetudo vero.
May 2013 - Nov 2013
Drupal Developer
@ Krollon
Genitus jus melior neque nibh pagus vel voco. Augue elit euismod secundum si. Ad ea haero in iustum lenis minim molior scisco. Consequat facilisis luptatum scisco suscipere. Enim neo nostrud quis ratis. Aptent sino ulciscor valetudo vulpes.
Jul 2014 - Dec 2014
UX Designer
Oppeto praemitto ulciscor. Esca ulciscor valde. Commoveo euismod feugiat jus molior nobis pala paratus. Decet ibidem ille jumentum populus ratis sed valde. Iriure refoveo tum ut. Capto gemino hendrerit nisl paratus populus ratis te ut. Inhibeo mauris persto si.
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.
nav
Type:
Boolean
Default:
false
Show next/prev buttons.
rewind
Type:
Boolean
Default:
true
Go backwards when the boundary has reached.
navText
Type:
Array
Default:
['next','prev']
HTML allowed.
navElement
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.
navSpeed
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.
navContainer
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.