<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

<script>
  function createCarousel(customOptions = {}) {
    const defaultOptions = {
      animateDelay: false,
      animateIn: 'tns-fadeIn',
      animateNormal: 'tns-normal',
      animateOut: 'tns-fadeOut',
      arrowKeys: false,
      autoHeight: false,
      autoplay: false,
      autoplayButton: false,
      autoplayButtonOutput: true,
      autoplayDirection: 'forward',
      autoplayHoverPause: false,
      autoplayPosition: 'top',
      autoplayResetOnVisibility: true,
      autoplayText: [
        'start', 'stop'
      ],
      autoplayTimeout: 5000,
      autoWidth: false,
      axis: 'horizontal',
      center: false,
      container: '.slider',
      controls: true,
      controlsContainer: false,
      controlsPosition: 'top',
      controlsText: [
        '<span class="fas fa-chevron-left"></span>', '<span class="fas fa-chevron-right"></span>'
      ],
      edgePadding: 0,
      fixedWidth: false,
      freezable: true,
      gutter: 0,
      items: 1,
      lazyload: false,
      lazyloadSelector: '.tns-lazy-img',
      loop: true,
      mode: 'carousel',
      mouseDrag: false,
      nav: false,
      navAsThumbnails: false,
      navContainer: false,
      navPosition: 'top',
      nested: false,
      nextButton: false,
      nonce: false,
      onInit: false,
      prevButton: false,
      preventActionWhenRunning: false,
      preventScrollOnTouch: false,
      responsive: {
        500: {
          items: 2
        },
        992: {
          items: 3
        },
        1200: {
          items: 4
        }
      },
      rewind: false,
      slideBy: 1,
      speed: 300,
      swipeAngle: 15,
      touch: true,
      useLocalStorage: true,
      viewportMax: false
    };

    tns({
      ... defaultOptions,
      ...customOptions
    })
  }
</script>

<style>

  .tns-slider {
    display: flex;
  }

  .tns-item {
    margin-bottom: 10px;
  }

  .tns-outer {
    position: relative;
  }

  div[aria-label='Carousel Navigation'] {
    position: relative;
    display: flex;
    justify-content: flex-end;
  }

  [data-controls] {
    border: 0;
    padding: 0;
    z-index: 1;
    cursor: pointer;
    background-color: #0D21A1;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    line-height: normal;
    margin-top: 16px;
  }

  [data-controls="prev"] {}

  [data-controls="next"] {
    margin-left: 16px;
  }

  [data-controls="prev"],
  [data-controls="next"] {}

  .tns-nav {
    text-align:center;
    margin-top: -8px;
  }

  .tns-nav button {
    border-radius: 50%;
    padding: 6px;
    margin: 0 5px;
    background-color: #E6E8EB;
    border: none;
  }

  .tns-nav button.tns-nav-active {
    background-color:#0D21A1;
  }
</style>