JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/2.1.0/glide.min.js"></script>
<div class="col-es_12">
  <div id="Glide" class="glide">
    <div class="glide__arrows">
      <button class="glide__arrow prev" data-glide-dir="<">prev</button>
      <button class="glide__arrow next" data-glide-dir=">">next</button>
    </div>

    <div class="glide__wrapper">
      <ul class="glide__track col-es_12 category">
        <li class="glide__slide">
          <a href='#anchor-link-1' id="dtab-1">
            <mark>JavaScript</mark>
          </a>
        </li>

        <li class="glide__slide">
          <a href='#anchor-link-2' id="dtab-2">
            <mark>Java</mark>
          </a>
        </li>
      </ul>
    </div>
    <!--glide__wrapper-->

  </div>
  <!--#Glide-->
</div>
<!--col-es_12-->

CSS

.glide {
  position: relative;
  width: 100%;
  height: 100%;
}

.glide__wrapper {
  overflow: hidden;
}

.glide__track {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -ms-touch-action: pan-Y;
  touch-action: pan-Y;
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.glide__track.dragging {
  cursor: grabbing;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.glide__slide {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.glide__slide a {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.glide__arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.glide__arrow {
  cursor: pointer;
}

.glide__bullets {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.glide--slider .glide__slide {
  float: left;
  clear: none;
}

.glide--carousel.glide--vertical .glide__track {
  overflow: visible;
}

.glide--carousel .glide__slide {
  float: left;
  clear: none;
}

.glide--slideshow .glide__wrapper {
  height: 100%;
}

.glide--slideshow .glide__slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: translate3d(0px, 0px, 0px);
}

.glide--slideshow .glide__slide.active {
  z-index:...

JavaScript

var $slider = $("#Glide").glide({
  type: "carousel",
  autoplay: false,
  animationDuration: 1000
});


if (window.matchMedia('(min-width: 768px)').matches) {
  $slider.data('glide_api').destroy();
} else {
  $slider.data('glide_api').refresh();
}