Note: Carousels are not 100% accessible. 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 Slider".

Bootstrap 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 Slider Plugin by Ken Wheeler

Please remember accessibility:

for usage options and codes‚ please visit the Slick Slider Github PageThis link opens a new window or tab.

Some Amazing Work We Have Done

We can make your project look great

project number 1
project number 2
project number 3
project number 4
project number 5
project number 6
JAVASCRIPT - jQuery Ready()
$('.slider-portfolio').slick({
slidesToShow: 3,
accessibility: true,
slidesToScroll: 3,
dots: true,
focusOnSelect: true,
responsive:
     [{ breakpoint: 1000, settings: { slidesToShow: 2, slidesToScroll: 2 } },
     { breakpoint: 700, settings: { slidesToShow: 1, slidesToScroll: 1, centerMode: true, }}],
});

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).

project number 1

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.

project number 2

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.

project number 3

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.
HTML
<div class="smallSlick">
      <div> <!-- FIRST SLIDE -->
            <h4>Headline</h4>
            <p>Some text here</p>
            <img src="images/background_low_face.jpg" alt="project number 1" />
      </div>
      <div> <!-- SECOND SLIDE -->
            <h4>Headline</h4>
            <p>Some text here</p>
            <img src="images/background_low_face.jpg" alt="project number 1" />
      </div>
</div>

JAVASCRIPT - jQuery Ready()
$('.smallSlick').slick({
      arrows: true,
      accessibility: true,
});

Example3: full width slick carousel with arrows on image

header hands typing on keyboard
header image man writing in notebook
header image coffee earphones monitor

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)

<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>