67 lines
2.0 KiB
JavaScript
67 lines
2.0 KiB
JavaScript
/*
|
|
* SewJoy Theme - Custom Design Flow splash carousel
|
|
*
|
|
* Cycles .dy-splash__slide children via the .is-active class. Left/right
|
|
* arrows and the 3 dots at the bottom both drive navigation, with
|
|
* wrap-around at the ends. Keyboard arrow support when the carousel
|
|
* region has focus.
|
|
*/
|
|
(function ($) {
|
|
'use strict';
|
|
|
|
$(function () {
|
|
var $splash = $('.dy-splash');
|
|
if (!$splash.length) {
|
|
return;
|
|
}
|
|
|
|
var $slides = $splash.find('.dy-splash__slide');
|
|
var $dots = $splash.find('.dy-splash__dot');
|
|
var count = $slides.length;
|
|
|
|
if (count === 0) {
|
|
return;
|
|
}
|
|
|
|
var current = 0;
|
|
|
|
function go(target) {
|
|
// Wrap-around so negative indices and >= count both loop.
|
|
var next = ((target % count) + count) % count;
|
|
if (next === current) {
|
|
return;
|
|
}
|
|
$slides.removeClass('is-active').eq(next).addClass('is-active');
|
|
$dots.removeClass('is-active').attr('aria-selected', 'false')
|
|
.eq(next).addClass('is-active').attr('aria-selected', 'true');
|
|
current = next;
|
|
}
|
|
|
|
$splash.on('click', '.dy-splash__arrow--prev', function () {
|
|
go(current - 1);
|
|
});
|
|
|
|
$splash.on('click', '.dy-splash__arrow--next', function () {
|
|
go(current + 1);
|
|
});
|
|
|
|
$splash.on('click', '.dy-splash__dot', function () {
|
|
var target = parseInt($(this).attr('data-go'), 10);
|
|
if (!isNaN(target)) {
|
|
go(target);
|
|
}
|
|
});
|
|
|
|
// Keyboard arrow support — only when the carousel region is focused
|
|
// or its descendants are.
|
|
$splash.on('keydown', function (event) {
|
|
if (event.key === 'ArrowLeft') {
|
|
event.preventDefault();
|
|
go(current - 1);
|
|
} else if (event.key === 'ArrowRight') {
|
|
event.preventDefault();
|
|
go(current + 1);
|
|
}
|
|
});
|
|
});
|
|
})(jQuery); |