JSFiddle - React, Tailwind, and code Playground

by alan_omar

HTML

<link rel="stylesheet" href="https://wallpaperstacks.sgp1.digitaloceanspaces.com/mycss.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="ibox bsh">
  <h4>First</h4>
  <div class="projects-catalog">
    <div class="catalog-cover">
      <i class="left-button"></i>
      <ul class="sliderWrapper1">
        <a class="slide" href="https://wikipedia.org">
          <img height="50" width="50" class="img-circle tags" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
          <div class="sidekro">
            Apple
          </div>
        </a>
        <a class="slide" href="https://wikipedia.org">
          <img height="50" width="50" class="img-circle tags" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
          <div class="sidekro">
            Banana
          </div>
        </a>
        <a class="slide" href="https://wikipedia.org">
          <img height="50" width="50" class="img-circle tags" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
          <div class="sidekro">
            Orange
          </div>
        </a>

        <a class="slide" href="https://wikipedia.org">
          <img height="50" width="50" class="img-circle tags" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
          <div class="sidekro">
            Apple
          </div>
        </a>
        <a class="slide" href="https://wikipedia.org">
          <img height="50" width="50" class="img-circle tags"...

JavaScript

function slide(sliderWrapper) {

  const catalog_cover = $(sliderWrapper).parent();
  const right_button = $(sliderWrapper).next(".right-button")
  const left_button = $(sliderWrapper).prev(".left-button")

  $(sliderWrapper).prop("scrollWidth") > $(catalog_cover).width() && $(right_button).show();
  const slider = document.querySelector(sliderWrapper),
    preventClick = e => {
      e.preventDefault(), e.stopImmediatePropagation()
    };

  let startX, scrollLeft, isDown = !1,
    isDragged = !1;

  slider && (slider.addEventListener("mousedown", e => {
    isDown = !0, slider.classList.add("active"), startX = e.pageX - slider.offsetLeft, scrollLeft = slider.scrollLeft
  }), slider.addEventListener("mouseleave", () => {
    isDown = !1, slider.classList.remove("active")
  }), slider.addEventListener("mouseup", e => {
    isDown = !1;
    const t = document.querySelectorAll("a");
    if (isDragged)
      for (let e = 0; e < t.length; e++) t[e].addEventListener("click", preventClick);
    else
      for (let e = 0; e < t.length; e++) t[e].removeEventListener("click", preventClick);
    slider.classList.remove("active"), isDragged = !1
  }), slider.addEventListener("mousemove", e => {
    if (!isDown) return;
    isDragged = !0, e.preventDefault();
    const t = 2 * (e.pageX - slider.offsetLeft - startX);
    slider.scrollLeft = scrollLeft - t
  }));

  var widthc = $(catalog_cover).width() - 20;
  $(left_button).hide(), $(left_button).click((function() {
    $(right_button).show(), $(sliderWrapper).animate({
      scrollLeft: "-=" + widthc + "px"
    })
  })), $(right_button).click((function() {
    $(left_button).show(), $(sliderWrapper).animate({
      scrollLeft: "+=" + widthc + "px"
    })
  })), $((function() {
    $(sliderWrapper).scroll((function() {
      var e = $(sliderWrapper).outerWidth(),
        t = $(sliderWrapper)[0].scrollWidth,
        n = $(sliderWrapper).scrollLeft();
      matchright = parseInt(t - e);
      matchleft = parseInt(n);
     ...