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.

This is carousel option #1

This is carousel option #2

This is carousel option #3

This is carousel option #4

This is carousel option #5

This is carousel option #6

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

WCAG 2.0 AA

"Web Content Accessibility Guidelines (WCAG) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the internet. They consist of a set of guidelines for making content accessible, primarily for people with disabilities, but also for all user agents, including highly limited devices, such as mobile phones..." (source: Wikipedia).

Section 508

"...Section 508 was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals..." (source: Wikipedia). Lorum Ipsum Sit Amet. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. consectetur adipiscing metus elit.

Accessible For All

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Lorem ipsum dolor.

Optimized Colors for Color Blind

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

The template has been thourghly tested and is compatible with both WCAG 2.0 AA and Section 508.

Accessible = Simpler

All users will be happier with a simpler website design that is consistant and leaves no room for guessing.

More Audience Options

Catering to all users gives you bigger potential crowd for your site.

All Accessible Controls

Every control used is accessible according to the standarts WCAG 2.0 AA & Section 508.

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>