Hey:
You are not specific what content you wish to do with the slider. I have created a free slider:
https://github.com/PHuhn/WordPress-Child-Theme-Addons
In general, all content div’s are set to display none and then the JavaScript loops through and set to be displayed. All animation is handled by the built in CSS animation.
Phil
JavaScript Code:
var gc_sliders = document.querySelectorAll( '.gc-slider' );
/**
** Get all sliders, loop through the items and set display
** to none and block. The slider has the following:
** slider
** header
** items
** item #0
** ...
** item #n
** footer
** counter
*/
if( gc_sliders.length > 0 ) {
Array.prototype.forEach.call( gc_sliders, function( gc_slider ) {
var millisec = parseInt( gc_slider.dataset.millisec );
var items = gc_slider.children[1];
var count = items.children.length - 1;
var counter = gc_slider.children[3];
// process first slider item without delay
var idx = gc_slider_shift( gc_slider, items, millisec, count, count, 'table' );
gc_slider_counter( counter, idx, count );
var interval = setInterval( function() {
idx = gc_slider_shift( gc_slider, items, millisec, idx, count, 'table' );
gc_slider_counter( counter, idx, count );
}, millisec );
} );
}
/**
** Function: gc_slider_shift
** Turns off the display of the current child and moves to the
** next child and turns that item to display on.
** @param {*} gc_slider: dom element with gc-slider class
** @param {*} items: dom elements of slide-items of gc-slider element
** @param {*} millisec: timeout interval
** @param {*} idx: the current index (idx of count)
** @param {*} count: the total count of slides (idx of count)
** @param {*} display: display type, currently 'table'
* @returns
*/
function gc_slider_shift( gc_slider, items, millisec, idx, count, display ) {
if ( gc_slider.classList.contains('gc-paused') === false ) {
items.children[idx].style.display = 'none';
idx = ( idx === count ? 0 : ++idx );
items.children[idx].style.display = display;
// console.log( <code>${gc_slider.id} ${idx}, ${millisec}, ${count}</code> );
}
return idx;
}
/**
** Function: gc_slider_counter
** Construct the display of the counter of "# of #", example "1 of 3"
** @param {*} gc_slider: dom element with gc-slider class
** @param {*} idx: the current index (idx of count)
** @param {*} count: the total count of slides (idx of count)
** @returns idx that was passed
*/
function gc_slider_counter( gc_slider, idx, count ) {
gc_slider.innerHTML = <code>${idx + 1} of ${count + 1}</code>;
return idx;
}
/**
** Function: gc_slider_hover
** Add a class of paused to the element. Aria requirement to be able
** to pause the slider/carousel.
** @param {*} element: dom hovered element with gc-slider class
** @returns false
*/
function gc_slider_hover( element ) {
element.classList.add('gc-paused');
return false;
}
/**
** Function: gc_slider_hover_leave
** Remove a class of paused to the element.
** @param {*} element: dom hovered element with gc-slider class
** @returns false
*/
function gc_slider_hover_leave( element ) {
element.classList.remove('gc-paused');
return false;
}
