zTest

[xmdao_listing_gallery number_of_posts=”2″ class=”iul_listings_slide1 slick_listings_slider1″ layout=”slider1″ image_width=”1920″ image_height=”1080″]

Coco Oil body oil

Bacon ipsum dolor amet porchetta sausage tenderloin cupim, meatloaf beef ribs flank swine prosciutto frankfurter.

Learn more

Fancy generic wristwatch

Sausage shank shoulder ball tip doner. Ground round meatball tongue corned beef doner cow frankfurter.

Learn more

Curology lotion

Beef ribs drumstick leberkas ball tip picanha, bresaola ground round. Ham hock beef ham filet mignon.

Learn more

Hero banner carousel with custom controls using accessible-slick

Who doesn't love hero banner carousels? Ok, lots of people. But still, if you have to build one, here's an example of how you can do it in an accessible way using accessible-slick!

This demo shows a few of the accessibility features of accessible-slick, along with some relevant tips that you can use for any carousel. In particular:

  1. Autoplay is enabled, which now automatically comes with a customizable pause/play button to comply with WCAG 2.2.2.
  2. The default pause/play icons are replaced with icons from LineAwesome using the new pauseIcon and playIcon settings to give a modern look-and-feel.
  3. Custom previous and next buttons are also provided (using the existing prevArrow and nextArrow settings) to better match the modern look-and-feel of the imagery.
  4. The previous and next buttons are placed before the slide content (but after the autoplay toggle button) using the new arrowsPlacement setting in order to maintain a logical tab sequence and meet WCAG 2.4.3 and 1.3.2.
  5. Text is overlaid on each slide, but is carefully positioned to "safe" areas to ensure good color contrast. Be careful with your background images and text choices - these are common sources of WCAG 1.4.3 violations!

Learn more about accessible-slick!