Features - Carousel

Note: Carousels are not 100% accessible, as it says on the Bootstrap page. In order to improve their accessibility wrappers are used to make them keyboard-accessible. Please take into consideration that auto-playing carousels are problematic and should be avoided. See more on this bellow under "Slick".

Bootstrap Accessible Carousel

The Carousel Widget takes a list of items and converts it into a window with buttons that allow the user to scroll the visible content both forward and backward. This allows a large number of items to be shown without taking up too much screen real estate. For more information and examples‚ please visit the Bootstrap Carousel pageThis link opens a new window or tab.

Carousel based on Slick Plugin by Ken Wheeler

Please remember accessibility:

Please set the "accessibility" option to "true".
Remebmber that if you use the "auto start" feature, you must provide a stop button that stops the carousel for it to adhere to WCAG 2.0 AA & Section 508.

Some Amazing Work We Have Done

We can make your project look great

Example2: diverse content, 1 slide per click

Optimized Colors for Color Blind section is expanded

Chosen accent colors have been tested for both color blind safety and for proper contrast from the background, as defined in WCAG 2.0 AA and Section 508 and are complient.

Complient HTML section is collapsed

Accessible = Simpler section is collapsed

More Audience Options section is collapsed

All Accessible Controls section is collapsed

Example3: full width slick carousel with arrows on image

Slider based on jQuery-ui

The Slider Widget provides a method that allows users to select a single value within a given range.

Monthly Tax Credit Slider (Between $0 - $500)

Monthly Tax Credit ($ getting each month)

Annual Tax Credit ($ left each month)

<div class="row push-up-ten">
  <div class="col-md-7">
      <p>Monthly Tax Credit Slider (Between $0 - $500)</p>
      <div id="slider"></div>
  </div>
</div>
<div>
  <div>
      <label for="amount">Monthly Tax Credit ($ getting each month)</label>
      <input type="text" id="amount"/>
  </div>
  <div>
      <label for="amount2">Annual Tax Credit ($ left each month)</label>
      <input type="text" id="amount2"/>
  </div>
</div>