<section class="u-background-grey-60 u-padding-r-all">
    <div class="u-layout-medium u-layoutCenter">

        <div class="Grid">
            <h2 id="carousel-heading-1" class="Grid-cell u-text-h2 u-color-white u-layout-centerLeft">Slider 1</h2>

            <!-- <next / prev buttons> -->
            <div class="Grid-cell u-layout-centerRight">
                <button class="owl-prev u-padding-bottom-xl u-padding-right-xxl u-text-r-xl u-color-teal-50" aria-controls="carousel-1">
            <span class="u-hiddenVisually">Vai alla slide precedente</span>
            <span class="u-alignMiddle Icon Icon-arrow-left" role="presentation"></span>
        </button>
                <button class="owl-next u-padding-bottom-xl u-padding-left u-text-r-xl u-color-teal-50" aria-controls="carousel-1">
          <span class="u-hiddenVisually">Vai alla slide successiva</span>
          <span class="u-alignMiddle Icon Icon-arrow-right" role="presentation"></span>
        </button>
                <p class="u-hiddenVisually">È possibile navigare le slide utilizzando i tasti freccia</p>
            </div>
            <!-- </next / prev buttons> -->
        </div>

        <div id="carousel-1" class="owl-carousel owl-theme" role="region" data-carousel-options='{"items":1,"responsive":false,"dots":true}'>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-1" aria-labelledby="desc-1" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=1" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-1" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    A architecto qui et veritatis.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-2" aria-labelledby="desc-2" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=2" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-2" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Sequi quo rerum velit saepe.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-3" aria-labelledby="desc-3" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=3" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-3" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Rerum est laborum quis distinctio.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-4" aria-labelledby="desc-4" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=4" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-4" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Praesentium beatae totam iste atque sit quae.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-5" aria-labelledby="desc-5" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=5" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-5" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Dolores et itaque voluptas quas laudantium molestias.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

        </div>
    </div>
</section>
<section class="u-background-grey-60 u-padding-r-all">
    <div class="u-layout-medium u-layoutCenter">

        <div class="Grid">
            <h2 id="carousel-heading-2" class="Grid-cell u-text-h2 u-color-white u-layout-centerLeft">Slider 2</h2>

            <!-- <next / prev buttons> -->
            <div class="Grid-cell u-layout-centerRight">
                <button class="owl-prev u-padding-bottom-xl u-padding-right-xxl u-text-r-xl u-color-teal-50" aria-controls="carousel-2">
            <span class="u-hiddenVisually">Vai alla slide precedente</span>
            <span class="u-alignMiddle Icon Icon-arrow-left" role="presentation"></span>
        </button>
                <button class="owl-next u-padding-bottom-xl u-padding-left u-text-r-xl u-color-teal-50" aria-controls="carousel-2">
          <span class="u-hiddenVisually">Vai alla slide successiva</span>
          <span class="u-alignMiddle Icon Icon-arrow-right" role="presentation"></span>
        </button>
                <p class="u-hiddenVisually">È possibile navigare le slide utilizzando i tasti freccia</p>
            </div>
            <!-- </next / prev buttons> -->
        </div>

        <div id="carousel-2" class="owl-carousel owl-theme" role="region" data-carousel-options='{"items":2,"autoplay":true,"responsive":false,"dots":true}'>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-1" aria-labelledby="desc-1" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=1" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-1" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    A architecto qui et veritatis.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-2" aria-labelledby="desc-2" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=2" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-2" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Sequi quo rerum velit saepe.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-3" aria-labelledby="desc-3" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=3" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-3" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Rerum est laborum quis distinctio.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-4" aria-labelledby="desc-4" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=4" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-4" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Praesentium beatae totam iste atque sit quae.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-5" aria-labelledby="desc-5" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=5" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-5" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Dolores et itaque voluptas quas laudantium molestias.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-6" aria-labelledby="desc-6" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=6" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-6" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Aut exercitationem magni minus eum temporibus.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-7" aria-labelledby="desc-7" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=7" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-7" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Officiis dolores dolore.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-8" aria-labelledby="desc-8" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=8" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-8" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Iusto inventore asperiores deserunt eum est ut dolores.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

        </div>
    </div>
</section>
<section class="u-background-grey-60 u-padding-r-all">
    <div class="u-layout-medium u-layoutCenter">

        <div class="Grid">
            <h2 id="carousel-heading-3" class="Grid-cell u-text-h2 u-color-white u-layout-centerLeft">Slider 3</h2>

            <!-- <next / prev buttons> -->
            <div class="Grid-cell u-layout-centerRight">
                <button class="owl-prev u-padding-bottom-xl u-padding-right-xxl u-text-r-xl u-color-teal-50" aria-controls="carousel-3">
            <span class="u-hiddenVisually">Vai alla slide precedente</span>
            <span class="u-alignMiddle Icon Icon-arrow-left" role="presentation"></span>
        </button>
                <button class="owl-next u-padding-bottom-xl u-padding-left u-text-r-xl u-color-teal-50" aria-controls="carousel-3">
          <span class="u-hiddenVisually">Vai alla slide successiva</span>
          <span class="u-alignMiddle Icon Icon-arrow-right" role="presentation"></span>
        </button>
                <p class="u-hiddenVisually">È possibile navigare le slide utilizzando i tasti freccia</p>
            </div>
            <!-- </next / prev buttons> -->
        </div>

        <div id="carousel-3" class="owl-carousel owl-theme" role="region">

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-1" aria-labelledby="desc-1" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=1" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-1" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    A architecto qui et veritatis.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-2" aria-labelledby="desc-2" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=2" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-2" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Sequi quo rerum velit saepe.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-3" aria-labelledby="desc-3" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=3" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-3" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Rerum est laborum quis distinctio.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-4" aria-labelledby="desc-4" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=4" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-4" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Praesentium beatae totam iste atque sit quae.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-5" aria-labelledby="desc-5" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=5" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-5" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Dolores et itaque voluptas quas laudantium molestias.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-6" aria-labelledby="desc-6" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=6" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-6" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Aut exercitationem magni minus eum temporibus.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

            <div class="Carousel-item">
                <div class="u-color-grey-30">
                    <figure>
                        <a href="#img-7" aria-labelledby="desc-7" class="u-block u-padding-all-xxs">
      <img src="//placehold.it/370x205?text=7" class="u-sizeFull" alt="" />
    </a>
                        <figcaption class="u-padding-r-top">
                            <p class="u-color-teal-50 u-text-r-xxs u-textWeight-700 u-padding-bottom-s">Foto</p>
                            <div class="Grid">
                                <span class="Grid-cell u-sizeFit Icon-camera u-color-white u-floatLeft u-text-r-l" aria-hidden="true"></span>
                                <h3 id="desc-7" class="Grid-cell u-sizeFill u-padding-left-s u-lineHeight-l u-color-white u-text-r-xs u-textWeight-700">
                                    Officiis dolores dolore.
                                </h3>
                            </div>
                        </figcaption>
                    </figure>
                </div>

            </div>

        </div>
    </div>
</section>
  • Content:
    /**
     * Owl Carousel v2 Accessibility Plugin
     * Version 0.2.1
     *
     * https://github.com/rtrvrtg/owlcarousel2-a11ylayer
     *
     * The MIT License (MIT)
     *
     * Copyright (c) 2015 Geoffrey Roberts
     *
     * Permission is hereby granted, free of charge, to any person obtaining a copy
     * of this software and associated documentation files (the "Software"), to deal
     * in the Software without restriction, including without limitation the rights
     * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
     * copies of the Software, and to permit persons to whom the Software is
     * furnished to do so, subject to the following conditions:
     *
     * The above copyright notice and this permission notice shall be included in
     * all copies or substantial portions of the Software.
     *
     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
     * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
     * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
     * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
     * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
     * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     * THE SOFTWARE.
     *
     *
     * © Geoffrey Roberts 2016
     */
    
    ;
    (function($) {
    
      var Owl2A11y = function(carousel) {
        this._core = carousel
        this._initialized = false
    
        this._core._options = $.extend(Owl2A11y.defaults, this._core.options)
    
        this.$element = this._core.$element
    
        var setCurrent = $.proxy(function(e) {
          this.setCurrent(e)
        }, this)
    
        this._handlers = {
          'initialized.owl.carousel': $.proxy(function(e) {
            this.setupRoot()
            if (e.namespace && !this._initialized) {
              this.setupFocus()
              this.setupKeyboard()
            }
            this.setCurrent(e)
          }, this),
          'changed.owl.carousel': setCurrent,
          'translated.owl.carousel': setCurrent,
          'refreshed.owl.carousel': setCurrent,
          'resized.owl.carousel': setCurrent
        }
        this.$element.on(this._handlers)
      }
    
    
      /* PREFERENCES */
    
      /**
       * Contains default parameters, if there were any.
       */
      Owl2A11y.defaults = {}
    
    
      /* EVENT HANDLERS */
    
      /**
       * Adds support for things that don't map nicely to the root object
       * such as event handlers.
       */
      Owl2A11y.eventHandlers = {}
    
      /**
       * Get a callback for keyup events within this carousel.
       *
       * @return callback
       *   An event callback that takes an Event as an argument.
       */
      Owl2A11y.prototype.getDocumentKeyUp = function() {
        var self = this
        return function(e) {
          var eventTarg = $(e.target),
            targ = self.focused(eventTarg),
            action = null
    
          if (!!targ) {
            if (e.keyCode == 37 || e.keyCode == 38) {
              action = 'prev.owl.carousel'
            } else if (e.keyCode == 39 || e.keyCode == 40) {
              action = 'next.owl.carousel'
            } else if (e.keyCode == 13) {
              if (eventTarg.hasClass('owl-prev')) action = 'prev.owl.carousel'
              else if (eventTarg.hasClass('owl-next')) action = 'next.owl.carousel'
              else if (eventTarg.hasClass('owl-dot')) action = 'click'
            }
    
            if (!!action) targ.trigger(action)
    
          }
        }
      }
    
    
      /* SETUP AND TEAR DOWN */
    
      /**
       * Assign attributes to the root element.
       */
      Owl2A11y.prototype.setupRoot = function() {
         this.$element.attr({
           // @FIXME
           //   role: 'listbox',
           tabindex: '0'
        })
      }
    
      /**
       * Setup keyboard events for this carousel.
       */
      Owl2A11y.prototype.setupKeyboard = function() {
        // Only needed to initialise once for the entire document
        if (!this.$element.attr('data-owl-access-keyup')) {
          this.$element.bind('keyup', this.getDocumentKeyUp())
            .attr('data-owl-access-keyup', '1')
        }
        this.$element.attr('data-owl-carousel-focusable', '1')
      }
    
      /**
       * Setup focusing behaviour for the carousel.
       */
      Owl2A11y.prototype.setupFocus = function() {
        // Only needed to initialise once for the entire document
        if (this._core.options.autoplay) {
          this.$element.bind('focusin', function() {
            $(this).attr({
                'data-owl-carousel-focused': '1',
                'aria-live': 'polite'
              }).trigger('stop.owl.autoplay')
            }).bind('focusout', function() {
            $(this).attr({
              'data-owl-carousel-focused': '0',
              'aria-live': 'off'
            }).trigger('play.owl.autoplay')
          })
        } else {
          this.$element.bind('focusin', function() {
            $(this).attr({
                'data-owl-carousel-focused': '1',
              })
            }).bind('focusout', function() {
            $(this).attr({
              'data-owl-carousel-focused': '0',
            })
          })
        }
    
        // Add tabindex to allow navigation to be focused.
        if (!!this._core._plugins.navigation) {
          var navPlugin = this._core._plugins.navigation,
            toFocus = []
          if (!!navPlugin._controls.$previous) {
            toFocus.push(navPlugin._controls.$previous)
          }
          if (!!navPlugin._controls.$next) {
            toFocus.push(navPlugin._controls.$next)
          }
          if (!!navPlugin._controls.$indicators) {
            toFocus.push(navPlugin._controls.$indicators.children())
          }
          $.each(toFocus, function() {
            this.attr('tabindex', '0')
          })
        }
      }
    
      /**
       * Assign attributes to the root element.
       */
      Owl2A11y.prototype.destroy = function() {
        this.$element.unbind('keyup', this.eventHandlers.documentKeyUp)
          .removeAttr('data-owl-access-keyup data-owl-carousel-focusable')
          .unbind('focusin focusout')
      }
    
    
      /* HELPER FUNCTIONS */
    
      /**
       * Identifies all focusable elements within a given element.
       *
       * @param DOMElement elem
       *   A DOM element.
       *
       * @return jQuery
       *   A jQuery object that may refer to zero or more focusable elements.
       */
      Owl2A11y.prototype.focusableElems = function(elem) {
        return $(elem).find('a, input, select, button, *[tabindex]')
      }
    
      /**
       * Identifies all focusable elements within a given element.
       *
       * @param jQeury elems
       *   A jQuery object that may refer to zero or more focusable elements.
       * @param boolean enable
       *   Whether focus is to be enabled on these elements or not.
       */
      Owl2A11y.prototype.adjustFocus = function(elems, enable) {
        elems.each(function() {
          var item = $(this)
          var newTabIndex = '0',
            storeTabIndex = '0',
            currentTabIndex = item.attr('tabindex'),
            storedTabIndex = item.attr('data-owl-temp-tabindex')
    
          if (enable) {
            newTabIndex = (
              typeof(storedTabIndex) != 'undefined' && (storedTabIndex != '-1') ?
              item.attr('data-owl-temp-tabindex') :
              '0'
            )
            storedTabIndex = newTabIndex
          } else {
            newTabIndex = '-1'
            storedTabIndex = (
              (typeof(currentTabIndex) != 'undefined') || (currentTabIndex != '-1') ?
              currentTabIndex :
              '0'
            )
          }
    
          item.attr({
            tabindex: newTabIndex,
            'data-owl-temp-tabindex': storeTabIndex
          })
        })
      }
    
      /**
       * Get the root element if we are focused within it.
       *
       * @param DOMElement targ
       *   An element that might be within this carousel.
       *
       * @return mixed
       *   Either the jQuery element containing the root element, or NULL.
       */
      Owl2A11y.prototype.focused = function(targ) {
        var targ = $(targ)
        if (targ.attr('data-owl-carousel-focused') == 1) {
          return targ
        }
        var closest = targ.closest('[data-owl-carousel-focused="1"]')
        if (closest.length > 0) return closest
        return null
      }
    
    
      /* UPDATE FUNCTIONS */
    
      /**
       * Identify active elements, set WAI-ARIA sttributes accordingly,
       * scroll to show element if we need to, and set up focusing.
       *
       * @param Event e
       *   The triggering event.
       */
      Owl2A11y.prototype.setCurrent = function() {
        var targ = this.focused($(':focus')),
          element = this._core.$element,
          stage = this._core.$stage,
          focusableElems = this.focusableElems,
          adjustFocus = this.adjustFocus
    
        if (!!stage) {
    //      var offs = stage.offset()
    //      if (!!targ) {
    //        window.scrollTo(
    //          offs.left,
    //          offs.top - parseInt($('body').css('padding-top'), 10)
    //        )
    //      }
    
          this._core.$stage.children().each(function() {
            var item = $(this)
            var focusable = focusableElems(this)
    
            // Use the active class to determine if we can see it or not.
            // Pretty lazy, but the Owl API doesn't make it easy to tell
            // from indices alone.
            if (item.hasClass('active')) {
              item.attr('aria-hidden', 'false')
              adjustFocus(focusable, true)
            } else {
              item.attr('aria-hidden', 'true')
              adjustFocus(focusable, false)
            }
          })
    
          if (!!targ) {
            // Focus on the root element after we're done moving,
            // but only if we're not using the controls.
            setTimeout(function() {
              var newFocus = element
              if ($(':focus').closest('.owl-controls').length) {
                newFocus = $(':focus')
              }
              newFocus.focus()
            }, 250)
          }
        }
      }
    
      $.fn.owlCarousel.Constructor.Plugins['Owl2A11y'] = Owl2A11y
    
    })(window.Zepto || window.jQuery, window)
    
  • URL: /components/raw/carousel/a11y.js
  • Filesystem Path: src/components/carousel/a11y.js
  • Size: 9.4 KB
  • Content:
    import $ from 'jquery'
    
    const opts = {
      owlPrev: '.owl-prev',
      owlNext: '.owl-next',
      owlItem: '.owl-item',
      jsSelector: '.owl-carousel',
      owlOpts: {
        nav: false,
        // navText: ['precedente', 'successivo'],
        items: 3,
        dots: false,
        loop: false,
        margin: 16,
        mouseDrag: true,
        URLhashListener: true,
        startPosition: 'URLHash',
        responsive: {
          0: {
            items: 1
          },
          768: {
            items: 2
          },
          992: {
            items: 3
          }
        }
      }
    }
    
    const owlInit = function(owlInstance) {
      const $owl = $(owlInstance)
    
      require(['owl.carousel', './a11y', 'owl.carousel/dist/assets/owl.carousel.css'], () => {
        $owl.on('changed.owl.carousel refreshed.owl.carousel', (event) => {
          if (!event.namespace) return
    
          var carousel = event.relatedTarget,
            element = event.target,
            current = carousel.current()
    
          $(`${opts.owlNext}[aria-controls='${element.id}']`)
            .toggleClass('u-visibilityHidden', current === carousel.maximum())
            .click(() => carousel.trigger('next.owl.carousel'))
    
          $(`${opts.owlPrev}[aria-controls='${element.id}']`)
            .toggleClass('u-visibilityHidden', current === carousel.minimum())
        })
    
        $owl.on('initialized.owl.carousel', (event) => {
          if (!event.namespace) return
          var element = event.target
    
          $(`${opts.owlNext}[aria-controls='${element.id}']`)
            .click(() => $(`#${element.id}`).trigger('next.owl.carousel'))
    
          $(`${opts.owlPrev}[aria-controls='${element.id}']`)
            .click(() => $(`#${element.id}`).trigger('prev.owl.carousel'))
        })
    
        const settings = $.extend({}, opts.owlOpts || {}, $owl.data('carouselOptions') )
    
        // must be called after events initialization
        $owl.owlCarousel(settings)
      })
    }
    
    const init = function() {
        const $owl = $(opts.jsSelector)
    
        if ($owl.length <= 0) {
          return
        }
    
        $owl.each(function( index, element ) {
          owlInit(element)
        })
    }
    
    
    $(document).ready(init)
    
    export default {
      opts,
      init
    }
    
  • URL: /components/raw/carousel/index.js
  • Filesystem Path: src/components/carousel/index.js
  • Size: 2 KB

There are no notes for this item.