Demo

Initial setup

Paste below HTML structure at your code where you want Carousel to appear. Any ID should be fine but make sure following class name are used. This is necessary to pull styles from the CSS file. These CSS can be customized as well. Any kind of design can be put inside <li></li> element. 

    
                            
    <div id="carousel1" class="carousel1">
        <div class="carousel-container">
            <ul>
                <li class="slide">
                    ...
                </li>
                <li class="slide">
                    ...
                </li>
                <li class="slide">
                    ...
                </li>
                <li class="slide">
                    ...
                </li>
            </ul>
        </div>
    </div>

Call the slider component from Wrapper library and Slider

    
                            
    var carouselOptions = {
        slidenav: true,
        animate: false,
        animationTimeSlots: [2, 4, 2, 3], // Number in seconds
        animationType: "fade", // accepted value -> rtl, fade
        startAnimated: true,
        language: "EN",
        liveSRText: "Merchandise %current% of %total%",
        Buttons: {
            controlButtons: {
                "isIcon": false,
                "prev": {
                    "icon": "Previous Item",
                    "ariaText": "Previous"
                },
                "next": {
                    "icon": "Previous Item",
                    "ariaText": "Next"
                }
            },
            animationButtons: {
                "play": {
                    "icon": "▶",
                    "ariaText": "Stop Animation"
                },
                "pause": {
                    "icon": "￭",
                    "ariaText": "Start Animation"
                }
            },
            slideNavButtons: {
                "activeItemSRText": "(Current Item)",
                "itemDescriptionSRText": "Merchandise"
            }
        }
    };

    window.onload = (event) => {
        window.A11yWrapper('.carousel1').carousal(carouselOptions);
    };

    OR

    window.addEventListener('load', function () {
        window.A11yWrapper('.carousel1').carousal(carouselOptions);
    });

    OR
    
    //jQuery Users
    $( document ).ready(function() {
        window.A11yWrapper('.carousel1').carousal(carouselOptions);
    });

Configuration

All sort of customization need to be passed as an Object. Carousel settings can be customized by altering few attributes like

Key name Type Value
slidenav Boolean

true: Display carousel navigation control at the bottom of each slide

false: Hide navigation control
animate Boolean This will impact if only slidenav key value set to true.

true: Show Play/ Pause buttons

false: Hide Play/ Pause buttons
animationTimeSlots array of integers Number inside array defines seconds for each slide. For an example, consider Carousel has 3 slides. First and last slide will move in every 3 seconds and second slide will move faster like 1 seconds. In that case, pass [3,1,3]. Here each number will be assigned to slide suquentially.

Passing one item in array will assign the time to all sliders. For an example - [2] will assign 2 seconds delay to all slides. Default time is [3]

animationType String Only supported type is 'fade'. 'rtl' (Right to left) and 'ltr' (Left to right) is in progress
startAnimated Boolean

true: Carousel start animation on page load

false: Animation won't start
language String This option is meant for localization. Work is in progress !!
liveSRText String Screen reader content stating type of carousel any which number is displaying out of total number of slides. Format is important to show current slide and total slide number. Following format is allowed "Any text %current% of %total%", Here %current% and %total% are fixed words for the library and will be replaced with actual number dynamically.
Buttons Object This object contains following keys to hold information about icons and screen reader contents
  • controlButtons
    • isIcon - This is Boolean type and determine whether icon tag passed on following keys or not.

      true: Icons will be treated as HTML element and place on PAGE

      false: Icons will be considered as plain text

    • prev
      • icon - This is String type and accept any icon or image tag passed as string
      • ariaText - Screen reader text for the icon
    • next
      • icon - This is String type and accept any icon or image tag passed as string
      • ariaText - Screen reader text for the icon
  • animationButtons
    • play
      • icon - This is String type and accept any icon or image tag passed as string
      • ariaText - Screen reader text for the icon
    • pause
      • icon - This is String type and accept any icon or image tag passed as string
      • ariaText - Screen reader text for the icon
  • slideNavButtons
    • activeItemSRText - This is String type. This field describes active carousel item
    • itemDescriptionSRText - This is String type. This field describes type of carousel item

How to use Carousel component multiple times

Carousel can be positioned in multiple places while initiating the library. Also, multiple carousel can have different configurations as well. Below two ways, Carousel can be called several times.

  • Using multiple ID.

    Call wrapper class multiple times for each distinctive ID. 

        
    
    var carouselOption1 = {...},
        carouselOption2 = {...};

    window.addEventListener('load', function () {
        window.A11yWrapper('#carousel_id_1').carousal(carouselOption1);
        window.A11yWrapper('#carousel_id_2').carousal(carouselOption2);
    });
  • Using same class for multiple elements.

    In below example, configuration object will be assigned sequentially. First object will be assigned to first Carousel and second object will be assigned to second Carousel. If only one configuration object is passed then both Carousels will be built upon that single configuration object. 

        
    
    var carouselOption1 = {...},
    carouselOption2 = {...};

    window.addEventListener('load', function () {
        window.A11yWrapper('.carousel').carousal(carouselOption1, carouselOption2);
    });

Accessibility

Keyboard interaction

  • TAB - Press TAB key to focus on carousel controls and operate
  • MOUSE MOVE - MOUSE HOVER will stop the animation and live region describe the current slide information
  • ENTER - ENTER key press will select the slide or activate corresponding controls