Skip to content

Latest commit

 

History

History
167 lines (103 loc) · 5.8 KB

README.md

File metadata and controls

167 lines (103 loc) · 5.8 KB
Raw

brightspot-js-carousel

NOTE: Starting with 1.0.0, bsp-carousel is an ECMAScript 6 module instead of a RequireJS module. If you need an AMD version, work in the 0.x.x branch.

Front end abstraction for slick carousel. Provides a utility with pre-bundled themes and Brightspot plugins to instantiate the utility.

Installation

Manually:

Files

  • bsp-carousel.js - API which can be pulled into other plugins to build carousels, includes slick js
  • bsp-carousel-plugin.js - Brightspot plugin which instantiates bsp-carousel using the data-bsp-carousel attribute.
  • bsp-carousel-thumbnav-plugin.js - Brightspot plugin which combines two carousels (one for a "stage" and one for navigation) using the data-bsp-carousel-thumbnav attribute.
  • bsp-carousel.css - Base styles for all carousels, images and fonts included inline. Available font icons documented here. Includes slick css

bsp-carousel API

Methods

bsp_carousel.init($el, options)

require(['jquery', 'bsp-carousel'], function($, bsp_carousel) {
  var $el = $('.my-carousel');
  bsp_carousel.init($el, {
    theme: 'carousel-dots',
    themeConfig: {
      arrows: false
    }
  });
});
  • $el - jquery element
  • options - object
  • options.theme - string, selects a prepackaged set of carousel options (valid values: 'carousel-dots', 'carousel-horizontal-thumbnails')
  • options.themeConfig - object, overrides defaults set by slick and (if applied) a theme
  • options.breakpoints - object, overrides responsive breakpoints

bsp_carousel.bind(event, callback)

  • event - string, see events section below
  • callback - function

bsp_carousel.trigger(event, argument1, argument2, ...)

  • event - string, see events section below
  • argument1, argument2, ... - accepts any number of arguments

bsp_carousel.currentSlide

Abstraction of slickCurrentSlide method, returns the current slide

bsp_carousel.goTo(i)

Abstraction of slickGoTo method

  • i - number, index of desired slide to go to

bsp_carousel.next

Abstraction of slickNext method

bsp_carousel.prev

Abstraction of slickPrev method

bsp_carousel.pause

Abstraction of slickPause method

bsp_carousel.play

Abstraction of slickPlay method

bsp_carousel.add(ele, index, addBefore)

Abstraction of slickAdd method

  • ele - html or DOM object
  • index - number, add at this index, or before if addBefore is set
  • addBefore - bool, will set to add element before specified index. If no index provided, add to beginning or end

bsp_carousel.remove(index, removeBefore)

Abstraction of slickRemove method

  • index - number of slide to remove
  • removeBefore - bool, if set false will remove slide following index or last slide if no index set

bsp_carousel.filter(selectorOrFunction)

Abstraction of slickFilter method

  • selectorOrFunction - filters slides using jQuery .filter()

bsp_carousel.unfilter(i)

Abstraction of slickUnfilter method

  • i - slide to remove filtering on

bsp_carousel.getOption(option)

Abstraction of slickGetOption method

  • option - string, name of option to retrieve

bsp_carousel.setOption(option, value)

Abstraction of slickSetOption method

  • option - string, name of option to set
  • value - value to save

bsp_carousel.destroy

Abstraction of unslick method

bsp_carousel.slideCount

Returns total number of slides

bsp-carousel-plugin

General Brightspot plugin configuration documentation

Brightspot plugin that passes element and options to API init method.

<div data-bsp-carousel data-bsp-carousel-options='{ "theme" : "carousel-dots", "themeConfig" : { "arrows" : false } }'>
  <div><img alt="" src="image1.jpg" /></div>
  <div><img alt="" src="image2.jpg" /></div>
  <div><img alt="" src="image3.jpg" /></div>
</div>

bsp-carousel-thumbnav-plugin

General Brightspot plugin configuration documentation

Brightspot plugin which combines two carousels (one for a "stage" and one for navigation). Accepts two sets of configs: one for nav and one for stage.

<div data-bsp-carousel-thumbnav data-bsp-carousel-thumbnav-options='{ "nav" : { "themeConfig": { "arrows": false } }, "stage" : { "themeConfig": { "arrows": false } } }'>
  <div class="bsp-carousel-stage">
    <div><img alt="" src="image1.jpg" /></div>
    <div><img alt="" src="image2.jpg" /></div>
    <div><img alt="" src="image3.jpg" /></div>
  </div>
  <div class="bsp-carousel-nav">
    <div><img alt="" src="thumb1.jpg" /></div>
    <div><img alt="" src="thumb2.jpg" /></div>
    <div><img alt="" src="thumb3.jpg" /></div>
  </div>
</div>

Running specs

From project root:

karma start spec/karma.conf.js

Misc