// Custom JS to initialize slick slider (github.com/kenwheeler/slick) and then build a play/pause toggle button // Uses slick-specific methods & slick events. See slick events at: github.com/kenwheeler/slick/#events const HERO_SLIDER_CLASSNAME = '.hero-slider__slider'; // Our classname for the hero-slider's DOM parent const SLICK_PLAY = 'slickPlay'; // Methods unique to slick const SLICK_PAUSE = 'slickPause'; // Methods unique to slick const SLICK_NEXT_SLIDE = 'slickNext'; // Methods unique to slick const play = 'Play'; const pause = 'Pause';
function initSlick() {
$(HERO_SLIDER_CLASSNAME).slick({ // Slick takes an Object for custom parameters dots: true, slidesToShow: 1, slidesToScroll: 1, autoplay: true, autoplaySpeed: 4000, prevArrow:'<button type="button" data-role="none" class="prev slick-prev" aria-label="Previous" role="button" style="display: block;">Previous</button>', // TODO: change to <button> el nextArrow:'<button type="button" data-role="none" class="next slick-next" aria-label="Next" role="button" style="display: block;">Next</button>' // TODO: change to <button> el });
}
function setAttributeOnEl(el, attr, value) {
return el.setAttribute(attr, value);
}
function toggleSlickPlayState(el, slickState, newButtonText) {
const newButtonTextIsPause = newButtonText === pause; $(HERO_SLIDER_CLASSNAME).slick(slickState); // Slick.js method setAttributeOnEl(el, 'aria-label', newButtonText); el.classList.toggle('hero-slider__button--play'); el.innerHTML = newButtonText; newButtonTextIsPause ? $(HERO_SLIDER_CLASSNAME).slick(SLICK_NEXT_SLIDE) : null;
}
function watchForElementClicks(el) {
el.addEventListener('click', function(e) { let buttonTextIsPause = el.innerHTML === 'Pause'; buttonTextIsPause ? toggleSlickPlayState(el, SLICK_PAUSE, play) : toggleSlickPlayState(el, SLICK_PLAY, pause); });
}
function createButton() {
const SLICK_PARENT_EL = document.querySelector(HERO_SLIDER_CLASSNAME); const button = `<button id="sliderButton" role="button" type="button" aria-label="Pause" style="display: block;" class="hero-slider__button--toggle">Pause</button>`; SLICK_PARENT_EL.insertAdjacentHTML('beforeend', button); watchForElementClicks(document.getElementById('sliderButton'));
}
function watchForSlickInit(initFunction) {
// slick's on 'init' function (See events in slick docs): $(HERO_SLIDER_CLASSNAME).on('init', function(event, slick){ // According to slick doc's; you have to call a $(slick).on('init', function(){ //... }); before you initialize slick createButton(); }); initFunction(); // Initializing slick after the above `.on('init', function() {})`
}
function initSliders() {
if ( ! document.querySelector(HERO_SLIDER_CLASSNAME) ) return; watchForSlickInit(initSlick);
} // // USAGE: // // import initSliders from './sliders.js'; // // document.addEventListener('DOMContentLoaded', function() { // initSliders(); // }); export default initSliders;