slider2.js

(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);
  }
}) ();