Carousel

Default carousel

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6 
<div class="carousel" data-js="carousel">
  <ol class="carousel__slide" data-js="carousel-slide">
    <li class="carousel__item" data-js="carousel-item">
      <span class="carousel__tile">1</span>
    </li>
    <li class="carousel__item" data-js="carousel-item">
      <span class="carousel__tile">2</span>
    </li>
    <li class="carousel__item" data-js="carousel-item">
      <span class="carousel__tile">3</span>
    </li>
    <li class="carousel__item" data-js="carousel-item">
      <span class="carousel__tile">4</span>
    </li>
    <li class="carousel__item" data-js="carousel-item">
      <span class="carousel__tile">5</span>
    </li>
    <li class="carousel__item" data-js="carousel-item">
      <span class="carousel__tile">6</span>
    </li>
  </ol>
</div>

Carousel with custom settings

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6 
<div class="carousel" data-js="carousel-custom">
  <ol class="carousel__slide" data-js="carousel-slide-custom">
    <li class="carousel__item" data-js="carousel-item-custom">
      <span class="carousel__tile">1</span>
    </li>
    <li class="carousel__item" data-js="carousel-item-custom">
      <span class="carousel__tile">2</span>
    </li>
    <li class="carousel__item" data-js="carousel-item-custom">
      <span class="carousel__tile">3</span>
    </li>
    <li class="carousel__item" data-js="carousel-item-custom">
      <span class="carousel__tile">4</span>
    </li>
    <li class="carousel__item" data-js="carousel-item-custom">
      <span class="carousel__tile">5</span>
    </li>
    <li class="carousel__item" data-js="carousel-item-custom">
      <span class="carousel__tile">6</span>
    </li>
  </ol>
</div>

$(document).ready(function() {
  var customCarouselConfig = {
    carousel:'[data-js=carousel-custom]',
    carouselSlide:'[data-js=carousel-slide-custom]',
    carouselItem:'[data-js=carousel-item-custom]',
    mediumVisible:1,
    largeVisible:2,
    hasDots: true,
    prevArrow:'<a href="#" class="icon icon--left-black carousel__prev-next carousel__prev">prev</a>',
    nextArrow:'<a href="#" class="icon icon--right-black carousel__prev-next carousel__next">prev</a>'
  };
  $.pfCarousel.init(customCarouselConfig);
});

Introduction

Collects a list of related content into a single line of scrollable items. The number of items shown will change depending on the width of the carousel's context. These settings, amongst other things can be changed on the fly by passing a custom config object when calling $.pfCarousel.init(config). The config object is defined below.

Browser compatibility

The carousel leverages Object.assign, which is not supported natively by Internet Explorer 11 and lower. If support for these browsers is required, include a reference to polyfills/object.assign.js

HTML usage

Attribute Description Required?

[data-js=carousel]

and .carousel

 Placed on outer-most tag that will contain the carousel. CSS class required. Data attribute is required if using the default carousel config setting.
.carousel--lean Placed on .carousel tag to give it leaner styling (no background and less visual padding). CSS class required. Data attribute is required if using the default carousel config setting.

[data-js=carousel-slide]

and .carousel__slide

 Placed on the tag whose immediate children represent the carousel items. CSS class required. Data attribute is required if using the default carouselSlide config setting.

[data-js=carousel-item]

and .carousel__item

 Placed on the tags that represent each of the carousel items. CSS class required. Data attribute is required if using the default carouselItem config setting.
.carousel__tile Placed on the immediate child tag of carousel items to make each item's dimensions into a visible tile (currently in the form of a light grey background). Optional

Carousel config

The following attributes are added to the configuration object when initialising the carousel.

Attribute Description Default value

carousel: $selector

The outermost HTML hook on which the carousel will be constructed.

 [data-js=carousel]

carouselSlide: $selector

The carousel slider wrapper.

 [data-js=carousel-slide]

carouselItem: $selector

The selector for each item within a carousel.

 [data-js=carousel-item]

startVisible: number

The number of items needed for the carousel to trigger.

 1

smallVisible: number

The number of items displayed at the breakpoint defined by $.pfConstants.breakpoints.small.

 2

mediumVisible: number

The number of items displayed at the breakpoint defined by $.pfConstants.breakpoints.medium.

 3

largeVisible: number

The number of items displayed at the breakpoint defined by $.pfConstants.breakpoints.large.

 4

xlargeVisible: number

The number of items displayed at the breakpoint defined by $.pfConstants.breakpoints.xlarge.

 4

fullVisible: number

The number of items displayed at the breakpoint defined by $.pfConstants.breakpoints.full.

 4

initialised: className

The class name added to the carousel element when the carousel is initialised.

 'is-carousel'

hasDots: boolean

Flags whether dots should be displayed to indicate the number of available panes.

 false

infinite: boolean

Flags whether panes should automatically wrap around or stop when at the end.

 true

prevArrow: '<element>...</element>'

The markup used to for the previous panel arrow button.

 
<a href="#"
 class="icon icon--left-white carousel__prev-next carousel__prev">
    prev
</a>

nextArrow: '<element>...</element>'

The markup used to for the next panel arrow button.

 
<a href="#"
 class="icon icon--right-white carousel__prev-next carousel__next">
    next
</a>