<section class="u-background-grey-60 u-padding-r-all">
<div class="u-layout-medium u-layoutCenter">
<div class="Grid">
<h2 id="carousel-heading" class="Grid-cell u-text-h2 u-color-white u-layout-centerLeft">Gallerie</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 class="owl-carousel owl-theme" role="region" id="carousel-1">
<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>
<p class="u-padding-r-top u-text-r-xl">
<a href="" class="u-layout-centerLeft u-padding-r-top u-text-h4 u-textWeight-700 u-color-teal-50">Vedi tutte le gallerie</a>
</p>
</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
- Handle: @carousel--default
- Variants (2): Default , Multi
- Preview:
- Filesystem Path: src/components/carousel/carousel.tmpl
- References (1): @tile--gallery
- Referenced by (1): @page--content
There are no notes for this item.