Keen slider nav plugins.

keen-arrow-nav.js

/*----------------------------
Keen Arrow Nav
---
Plugin for Keen sliders to configure arrow navigation.
----------------------------*/

export default function keenArrowNav(slider) {
  // Elements
  const container = slider.container.closest('.keen-slider__container');
  const arrows = container.querySelectorAll('.keen-slider__arrow');

  if (arrows.length > 0) {
    [...arrows].forEach(arrow => {
      // Arrow Direction
      const arrowDirection = arrow.dataset.direction;

      // Click Listener
      arrow.addEventListener('click', e => {
        e.preventDefault();
        if (arrowDirection === 'prev') {
          slider.prev();
        } else if (arrowDirection === 'next') {
          slider.next();
        }
      });
    });
  }
}

keen-dot-nav.js

/*----------------------------
Keen Dot Nav - Plugin
---
Plugin for Keen sliders to easily configure dot navs within sliders.
Dots can serve as thumbnails, swatches, traditional dots. More than one set of control dots can exist within a slider.
----------------------------*/

export default function keenDotNav(slider) {
  // Elements
  const container = slider.container.closest('.keen-slider__container');
  const dotNavs = container.querySelectorAll('.keen-slider__dots');

  // Toggle Dot Class
  function toggleDotClass(dot, action) {
    // Inline/Tailwind classes
    const defaultClass = dot.dataset.defaultClass;
    const activeClass = dot.dataset.activeClass;

    // Class toggle. By default always add/remove an active class. Also add/remove the inline specified classes.
    if (action === 'remove') {
      dot.classList.remove('active');
      dot.classList.add(defaultClass);
      dot.classList.remove(activeClass);
    } else {
      dot.classList.add('active');
      dot.classList.add(activeClass);
      dot.classList.remove(defaultClass);
    }
  }

  // Dot Click
  if (dotNavs.length > 0) {
    [...dotNavs].forEach(nav => {
      const navItems = nav.querySelectorAll('.keen-slider__dot');

      if (navItems.length > 0) {
        // Add the active class to the first dot.
        toggleDotClass(navItems[0], 'add');

        // Event listener on dot click.
        [...navItems].forEach((dot, index) => {
          // Go to slide
          dot.addEventListener('click', () => {
            slider.moveToIdx(index);
          });
        });
      }
    });
  }

  // Select Listener
  slider.on('slideChanged', function (slider) {
    // Current Slide
    const slideIndex = slider.track.details.rel;

    // Dot Nav Update
    if (dotNavs.length > 0) {
      [...dotNavs].forEach(nav => {
        const navItems = nav.querySelectorAll('.keen-slider__dot');

        if (navItems.length > 0) {
          // Remove active class from dots
          [...navItems].forEach(dot => {
            toggleDotClass(dot, 'remove');
          });
          // Add active class to selected dot
          const selectedDot = navItems[slideIndex];
          toggleDotClass(selectedDot, 'add');
        }
      });
    }
  });
}

keen-slider.html

<div class="keen-slider__container">
  <!-- Slider -->
  <div class="keen-slider">
    <div class="keen-slider__slide">Slide</div>
    <div class="keen-slider__slide">Slide</div>
    <div class="keen-slider__slide">Slide</div>
  </div>

  <!-- Dot Nav -->
  <ul class="keen-slider__dots">
   <li class="keen-slider__dot" data-default-class="bg-black" data-active-class="bg-white"></li>
   <li class="keen-slider__dot" data-default-class="bg-black" data-active-class="bg-white"></li>
   <li class="keen-slider__dot" data-default-class="bg-black" data-active-class="bg-white"></li>
  </ul>
   
  <!-- Arrow Nav -->
  <div class="keen-slider__arrows">
    <div class="keen-slider__arrow" data-direction="prev">Previous</div>
    <div class="keen-slider__arrow" data-direction="next">Next</div>
  </div>
</div>

keen-slider.js

import KeenSlider from 'keen-slider';
import keenDotNav from '../helpers/keen-dot-nav';
import keenArrowNav from '../helpers/keen-arrow-nav';

/*-------------------------------
Keen Sliders
-------------------------------*/

document.addEventListener('DOMContentLoaded', event => {
  const keenSliders = document.querySelectorAll('.keen-slider');

  [...keenSliders].forEach(slider => {
    const keen = new KeenSlider(slider, {}, [keenDotNav, keenArrowNav]);
  });
});