Basic Accessible jQuery Content Carousel Plugin - Accessible Carrousel

File Size: 12.7 KB
Views Total: 6872
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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

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.