Basic Accessible jQuery Content Carousel Plugin - Accessible Carrousel

Accessible Carrousel is a jQuery content slider plugin that turns a group of DIV elements into an infinite-looping carousel with support for ARIA and keyboard interaction.

How to use it:

1. Include jQuery library and the jQuery accessible carrousel plugin on your webpage.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery-accessible-carrousel-aria.js"></script>

2. Add a group of DIV elements into the carousel following the html markup like this. Options can be passed via data-* attributes specified in the parent container.

<div class="carrousel__container" 
  data-carrousel-btn-previous-img="fleche_slider_gauche.png" 
  data-carrousel-btn-next-img="fleche_slider_droite.png"
  data-carrousel-btn-previous-text="Show previous panel"
  data-carrousel-btn-next-text="Show next panel"
  data-carrousel-prefix-classes="news"
  data-carrousel-span-text="Contenu" 
  data-carrousel-span-text-class="invisible"
  data-carrousel-transition="slide"
  data-carrousel-hx="h3">
  <div class="carrousel__content"> Content 1</div>
  <div class="carrousel__content"> Content 2</div>
  <div class="carrousel__content"> Content 3</div>
</div>
</div>

3. The global CSS styles for the carousel.

.carrousel__container {
  white-space: nowrap;
}
.carrousel__content[aria-hidden=true] {
  display: none;
}

4. Add a slide transition effect to the carousel.

.slide .carrousel__content {
  display: inline-block;
  vertical-align: top;
  visibility: visible;
  width: 100%;
  position: relative;
  -webkit-transition: left .5s ease-in;
  -moz-transition: left .5s ease-in;
  -o-transition: left .5s ease-in;
  -ms-transition: left .5s ease-in;
  transition: left .5s ease-in;
}

.slide .carrousel__content.visibility-off { visibility: hidden; }

.carrouselslide-1-1.slide > div,
.carrouselslide-2-1.slide > div,
.carrouselslide-3-1.slide > div,
.carrouselslide-4-1.slide > div,
.carrouselslide-5-1.slide > div { left: 0; }

.carrouselslide-1-2.slide > div,
.carrouselslide-2-2.slide > div,
.carrouselslide-3-2.slide > div,
.carrouselslide-4-2.slide > div,
.carrouselslide-5-2.slide > div { left: -100%; }

.carrouselslide-1-3.slide > div,
.carrouselslide-2-3.slide > div,
.carrouselslide-3-3.slide > div,
.carrouselslide-4-3.slide > div,
.carrouselslide-5-3.slide > div { left: -200%; }

.carrouselslide-1-4.slide > div,
.carrouselslide-2-4.slide > div,
.carrouselslide-3-4.slide > div,
.carrouselslide-4-4.slide > div,
.carrouselslide-5-4.slide > div { left: -300%; }

.carrouselslide-1-5.slide > div,
.carrouselslide-2-5.slide > div,
.carrouselslide-3-5.slide > div,
.carrouselslide-4-5.slide > div,
.carrouselslide-5-5.slide > div { left: -400%; }

.slide .carrousel__content[aria-hidden=true] { display: inline-block; }

Change log:

2017-09-16

• Show controls when more than one carrousel_content

2017-04-15

• Add attribute data-carrousel-active-slide

2017-04-07

• JS Update

2017-03-06

• Added type="button" and HTML code injection

2017-02-17

• JS Update

2016-12-10

• Fix indentation

2016-08-23

• Add missing variables declarations in scope.

2016-08-19

• Indentation, body selector and listeners

2015-05-28

• Fixed iOS Voiceover issue + indentation

2015-05-16

• Refacto data collection to optimise for size and perf

---

This awesome jQuery plugin is developed by nico3333fr. For more Advanced Usages, please check the demo page or visit the official website.