使相同的 JS 为不同的部门元素工作

问题描述

我有两个部分，First 和 Second 都是滑块，当我为 First 滑动时，它也发生在 Second 上，其他操作也是如此。我不想将不同的 JS 用于相同类型的操作，我该怎么办，我尝试了很多但都失败了。 First 和 Second 具有相同的类。我有一堆这样的部门。
你可以跑看看我的意思。

$(".sliderWrapper1").prop("scrollWidth") > $(".catalog-cover").width() && $(".right-button").show();
const slider = document.querySelector(".sliderWrapper1"),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(),$(".sliderWrapper1").animate({
    scrollLeft: "-=" + widthc + "px"
  })
})),$(".right-button").click((function() {
  $(".left-button").show(),$(".sliderWrapper1").animate({
    scrollLeft: "+=" + widthc + "px"
  })
})),$((function() {
  $(".sliderWrapper1").scroll((function() {
    var e = $(".sliderWrapper1").outerWidth(),t = $(".sliderWrapper1")[0].scrollWidth,n = $(".sliderWrapper1").scrollLeft();
    matchright = parseInt(t - e);
    matchleft = parseInt(n);
    differencerl = matchright - matchleft;
    differencerl <= 5 ? $(".right-button").hide() : 0 === n ? $(".left-button").hide() : $(".right-button,.left-button").show()
  }))
}))

<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" 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" 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" 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" 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" 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">
            Pine
          </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">
            Grapes
          </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">
            Pomeogranate
          </div>
        </a>

      </ul>
      <i class="right-button"></i>
    </div>
  </div>
</div>





<div class="iBox bsh">
  <h4>Second</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">
            January
          </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">
            February
          </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">
            march
          </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">
            April
          </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">
            May
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            July
          </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">
            August
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </div>
        </a>

      </ul>
      <i class="right-button"></i>
    </div>
  </div>
</div>

解决方法

您的初始代码仅指用于 2 个滑块的单个选择器 .sliderWrapper1。要解决此问题，您可以将代码封装在函数 animateSlider 中，该函数将 唯一 选择器作为参数并为两个滑块调用它。然后在您的代码中，您必须始终选择作为给定选择器的子元素的元素，以确保一个函数调用不会影响错误的滑块。

这是此 animateSlider 函数的示例。请注意，我在 DOM 中将 sliderWrapper1 更新为 slider-wrapper 并添加了 ID #slider1 和 #slider2：

const animateSlider = (sliderSelector) => {
  const slider = document.querySelector(`${sliderSelector} .slider-wrapper`);
  const $slider = $(sliderSelector)
  const $sliderWrapper = $(`${sliderSelector} .slider-wrapper`)
  const $sliderCatalog = $(`${sliderSelector} .catalog-cover`)
  const $rightBtn = $(`${sliderSelector} .right-button`)
  const $leftBtn = $(`${sliderSelector} .left-button`)

  $slider.prop("scrollWidth") > $sliderCatalog.width() && $rightBtn.show();

  const showBtns = () => {
    $rightBtn.show();
    $leftBtn.show()
  }

  const sliderWrapper = document.querySelector(`${sliderSelector} .slider-wrapper`),preventClick = e => {
      e.preventDefault(),e.stopImmediatePropagation()
    };
  let startX,scrollLeft,isDown = !1,isDragged = !1;
  sliderWrapper && (sliderWrapper.addEventListener("mousedown",e => {
    isDown = !0,sliderWrapper.classList.add("active"),startX = e.pageX - slider.offsetLeft,scrollLeft = slider.scrollLeft
  }),slider.addEventListener("mouseleave",() => {
    isDown = !1,sliderWrapper.classList.remove("active")
  }),slider.addEventListener("mouseup",e => {
    isDown = !1;
    const t = sliderWrapper.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);
    sliderWrapper.classList.remove("active"),isDragged = !1
  }),sliderWrapper.addEventListener("mousemove",e => {
    if (!isDown) return;
    isDragged = !0,e.preventDefault();
    const t = 2 * (e.pageX - sliderWrapper.offsetLeft - startX);
    sliderWrapper.scrollLeft = scrollLeft - t
  }));
  var widthc = $sliderCatalog.width() - 20;
  $leftBtn.hide(),$leftBtn.click((function() {
    $rightBtn.show(),$sliderWrapper.animate({
      scrollLeft: "-=" + widthc + "px"
    })
  })),$rightBtn.click((function() {
    $leftBtn.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);
      differencerl = matchright - matchleft;
      differencerl <= 5 ? $rightBtn.hide() : 0 === n ? $leftBtn.hide() : showBtns()
    }))
  }))
}

animateSlider("#slider1")
animateSlider("#slider2")

<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 id="slider1" class="ibox bsh">
  <h4>First</h4>
  <div class="projects-catalog">
    <div class="catalog-cover">
      <i class="left-button"></i>
      <ul class="slider-wrapper">
        <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" 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" 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" 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" 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" 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">
            Pine
          </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">
            Grapes
          </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">
            Pomeogranate
          </div>
        </a>

      </ul>
      <i class="right-button"></i>
    </div>
  </div>
</div>





<div id="slider2" class="ibox bsh">
  <h4>Second</h4>
  <div class="projects-catalog">
    <div class="catalog-cover">
      <i class="left-button"></i>
      <ul class="slider-wrapper">
        <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">
            January
          </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">
            February
          </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">
            March
          </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">
            April
          </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">
            May
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            July
          </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">
            August
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </div>
        </a>

      </ul>
      <i class="right-button"></i>
    </div>
  </div>
</div>

,

我制作这个 js fiddle 是为了结账。 您必须提取函数中的逻辑，然后使用不同的 sliderWrapper 类调用该函数。

function slide(sliderWrapper){
$(sliderWrapper).prop("scrollWidth") > $(sliderWrapper).parent().width() && $(sliderWrapper).next(".right-button").show();
const slider = document.querySelector(sliderWrapper),preventClick = e => {
    e.preventDefault(),e.stopImmediatePropagation()
  };
      
    let startX,isDragged = !1;
  
    slider && (slider.addEventListener("mousedown",e => {
  isDown = !0,slider.classList.add("active"),scrollLeft = slider.scrollLeft
}),() => {
  isDown = !1,slider.classList.remove("active")
}),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 = $(sliderWrapper).parent().width() - 20;
$(sliderWrapper).prev().hide(),$(sliderWrapper).prev().click((function() {
  $(sliderWrapper).next().show(),$(sliderWrapper).animate({
    scrollLeft: "-=" + widthc + "px"
  }) 
})),$(sliderWrapper).next().click((function() {
  $(sliderWrapper).prev().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);
    differencerl = matchright - matchleft;
    differencerl <= 5 ? $(sliderWrapper).next().hide() : 0 === n ? $(sliderWrapper).prev().hide() : ($(sliderWrapper).prev().show(),$(sliderWrapper).next().show())
  }))
}))
}


slide('.sliderWrapper1')
slide('.sliderWrapper2')

<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" 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" 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" 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" 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" 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">
            Pine
          </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">
            Grapes
          </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">
            Pomeogranate
          </div>
        </a>

      </ul>
      <i class="right-button"></i>
    </div>
  </div>
</div>
<div class="ibox bsh">
  <h4>Second</h4>
  <div class="projects-catalog">
    <div class="catalog-cover">
      <i class="left-button"></i>
      <ul class="sliderWrapper2">
        <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">
            January
          </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">
            February
          </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">
            March
          </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">
            April
          </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">
            May
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            June
          </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">
            July
          </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">
            August
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </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">
            September
          </div>
        </a>

      </ul>
      <i class="right-button"></i>
    </div>
  </div>
</div>