Page tree
Skip to end of metadata
Go to start of metadata

Overview

BPD websites use a jQuery plugin called Owl Carousel to render responsive sliding carousels in widgets such as:

Owl Carousel 2 comes additional functionality, especially around transition animations and navigation.

 

This article will detail the options available within the CMS, as well as show some working examples where practical. 

Step-by-step guide

  1. When you edit one of the widgets listed above, you'll now see Carousel Options on the main tab.


  2. Click Edit and a pop-up will open, showing any existing options that have been applied to that widget. 



  3. From here, you can: 
    1. update the value of existing options: click Edit on an option to change its current value, then click Update.
    2. add a new option: select an option from the dropdown, set the value, and click Add
    3. remove unwanted options: click Remove on an existing option to remove it from the widget. 

  4. Click Apply once you've finished, then Save your changes on the widget. 


Here's an example

 

Carousel options

Option nameDefinitionExample
itemsThe number of items (product tiles, banners, articles) visible on the carousel stage at any one time

The default number of items is 3. The example below shows a carousel with "items" set to 5.

marginThe right margin (in pixels) for each item 
loopPlays the carousel on infinite loop (instead of stopping at the end or rewinding back to the beginning).

centerCenters the starting/current item and shows partial previous/next items

mouseDragAllows dragging via mouse 
touchDragAllows dragging on touchscreens 
stagePaddingAdds padding (in pixels) to the stage, making part of the neighbouring, off-stage L/R items visible

autoWidthAllows variable width for items in the carousel

startPositionThe slide number to start on when the page loads 
navShows next/prev buttons 
rewindSlides backward to the beginning of the carousel when the last item is reached (rather than looping forward to the first item)

navTextThe text for prev/next buttons when 'nav' is enabled (can use HTML) 
navElementWhen 'nav' is enabled, this is the HTML container type for prev/next buttons (defaults to div) 
slideBySlides by whole page ('page') or by the specified number ('X') of slide items 
dotsShows dot indicators which can be used for navigation

dotsEachSpecify 'true' to display a dot for each slide, or 'X' to show a dot for every 'X' slides 
autoplaySlides items automatically, without user intervention

autoplayTimeoutThe interval time (milliseconds) before autoplay begins, as well as between each slide animation 
autoplayHoverPausePauses the animation on mouse hover 
smartSpeedThe time (milliseconds) for all slide animations to complete. 
autoplaySpeedThe time (milliseconds) for the autoplay slide animation to complete when autoplay is on.

navSpeedThe time (milliseconds) for the next/prev navigation slide animation to complete (doesn't apply to dots or autoplay) 
dotsSpeedThe time (milliseconds) for the dot navigation slide animation to complete (doesn't apply to next/prev or autoplay) 
dragEndSpeedThe time (milliseconds) for the animation to complete once you stop dragging the slider left or right 
callbacksListens for specific events and allows advanced .js manipulatiopn of the carousel (contact CV for assistance) 
responsiveAllows advanced owl carousel option manipulation at different breakpoints 
responsiveRefreshRateThe time (milliseconds) before the carousel refreshes after changing breakpoints 
videoAllows video in tiles (requires specific HTML - contact CV for assistance) 
videoHeightSpecifies video height 
videoWidthSpecifies video width 
animateOutThe animation effect when an item is exiting the user's view

Here's an example of the "FadeOut" AnimateOut effect:

animateInThe animation effect when an item is entering the user's view

Here's an example of the "Tada" AnimateIn effect:

itemElementThe HTML container type for individual items (defaults to div) 
stageElementThe HTML container type for the entire stage (defaults to div) 
navContainerAllows you to have the nav located in your own custom HTML container 
dotsContainerAllows you to have the dots located in your own custom HTML container 

 

Animations

With the animateIn and animateOut options you'll notice lots of choices for effects. Due to the sheer number available, it's impractical to display demo videos for each one here, but we've included a few of the more popular effects.

However, you can see for yourself how each animation behaves on the Animate.css webiste: https://daneden.github.io/animate.css/ 

bounce

flash

flipInX

flipInY

slideInLeft

 

Other animate effects available: 

  • pulse
  • rubber band
  • shake 
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • boounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flip
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • slideInUp
  • slideInDown
  • slideInRight
  • slideOutUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • zoomIn
  • zoomInUp
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomOut
  • zoomOutUp
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • hinge
  • jackInTheBox
  • rollIn
  • rollOut

 

Additional Information

Prerequisites

BPD websites on version 4.05+ will automatically use version 2 of the Owl Carousel. If your site is on an older version and you'd like to take advantage of the new carousel options, please contact us to discuss an upgrade.

Minimum Version Requirements

04.05.00

Prerequisites

None

Self Configurable

Yes

Business Function

Marketing

BPD Only?

Yes

B2B/B2C/Both

Both

Ballpark Hours From CV (if opting for CV to complete self config component)

Contact CV Support

Ballpark Hours From CV (in addition to any self config required)

Contact CV Support

Third Party Costs

n/a