the 6th of July, 2018

7th Van11y project released: an accessible carrousel

This project took some time to be released because a bit complex to code, it is inspired by the jQuery plugin accessible carrousel.

Be careful if you were a regular user of the jQuery version, even if the way they work are quite similar, there are some strong differences from implementation and deployment point of vue:

  • jQuery version was using a heavy and complex system in JavaScript to add a visibility-off class to hide hidden contents when the carrousel was using transitions… this system is not used anymore, as it is built in using CSS, which is far lighter and smarter.
  • Carrousel elements are now a lot simpler to style: no more repeated .carrouselslide-1-x.slide > div, welcome [data-carrousel-active-slide="1"].slide > .carrousel__content that are really easier to use.
  • Some classes are not used anymore, some other have been added, for more consistence for people that will use the script.

Compatibility is classical: IE9 and greater once the script is transpiled (transpilation is provided on Github repositery in the folder “dist”). You might check that transitions used with CSS are matching your needs.

It weights only 3kb minified and gzipped, which won’t be too heavy for your websites.

You may find it here: accessible carrousel, with the demos, examples and all necessary informations.

Here we are, it is a 1.0 version, young and not perfect, I’m already improving it, but it works, and I hope it will serve you!