Skip to content

Instantly share code, notes, and snippets.

@mattparlane
Created November 21, 2023 02:48
Show Gist options
  • Save mattparlane/455ce9f44a6a28b554fd282baca061aa to your computer and use it in GitHub Desktop.
Save mattparlane/455ce9f44a6a28b554fd282baca061aa to your computer and use it in GitHub Desktop.
(function () {
const items = document.getElementsByClassName('slider-component-2');
const slider = document.getElementById('slider-component-2');
const firstItem = items[0];
firstItem.classList.add('active');
// Set the automatic transition timer
const transitionInterval = "{{{transition_interval}}}";
const transitionSpeed = "{{{transition_speed}}}";
const automaticTransitionTimer = {{{ automatic_transition_timer }}};
slider.style.transition = automaticTransitionTimer
? `transform ${transitionSpeed}s ease-in-out ${transitionInterval}s`
: 'none';
slider.dataset.bsRide = automaticTransitionTimer
? 'carousel'
: 'false';
// Display Background Image
const displayBackgroundImage = {{{ display_background_image }}};
const backgroundImage = "{{{ background_image }}}";
if (displayBackgroundImage) {
slider.style.backgroundImage = `url('${backgroundImage}')`;
}
// page indicators
const pageSelectorIcon = "fa fa-circle";
function onClickIndicator(e) {
const indicator = slider.querySelector('.indicators li.active');
if (indicator && indicator.classList?.contains('active')) {
indicator.classList.remove('active');
}
e.target.parentElement.parentElement.classList.add('active');
}
if (items.length > 0) {
var ol = document.createElement('ol');
ol.classList.add('indicators', 'mt-4', 'text-center');
for (let i = 0; i < items.length; i += 1) {
var li = document.createElement('li');
var icon = document.createElement('i');
icon.setAttribute("class", pageSelectorIcon);
li.setAttribute("data-bs-target", "#slider-component-2");
li.setAttribute("data-bs-slide-to", i);
li.addEventListener('click', (e) => {
onClickIndicator(e);
});
if (i === 0) {
li.classList.add('active');
}
li.appendChild(icon);
ol.appendChild(li);
}
slider.appendChild(ol);
}
}) ();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment