让相同的 JS 为不同的部门元素工作
Make Same JS work for different Divisions Elements
我有两个部分，第一个和第二个都是滑块，当我为第一个滑动时，它也发生在第二个上，相同用于其他操作。我不想对同一种动作使用不同的 JS，我怎么能这样，我尝试了很多但都失败了。
First 和 Second 都具有相同的 class。我有很多这样的部门。
你可以 运行 看看我的意思。
$(".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 个滑块中使用的单个 select 或 .sliderWrapper1。要解决此问题，您可以将代码包装在函数 animateSlider 中，该函数将 unique selector 作为参数，并为两个滑块调用它。然后在您的代码中，您将必须始终 select 作为给定 select 子元素的元素，或者确保一个函数调用不会影响错误的滑块。
这是此 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, 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 = $(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>
我有两个部分，第一个和第二个都是滑块，当我为第一个滑动时，它也发生在第二个上，相同用于其他操作。我不想对同一种动作使用不同的 JS，我怎么能这样，我尝试了很多但都失败了。
First 和 Second 都具有相同的 class。我有很多这样的部门。
你可以 运行 看看我的意思。
$(".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 个滑块中使用的单个 select 或 .sliderWrapper1。要解决此问题，您可以将代码包装在函数 animateSlider 中，该函数将 unique selector 作为参数，并为两个滑块调用它。然后在您的代码中，您将必须始终 select 作为给定 select 子元素的元素，或者确保一个函数调用不会影响错误的滑块。
这是此 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, 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 = $(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>