I have two parts, First and Second both are sliders, while I slide for First, it happens for Second also, same for other actions. I do not want to use different JS for the same kind of actions, How can I, I tried a lot but failed. both First and Second have the same class. I have a bunch of divisions like this.
You can run and see what I mean.
$(".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>
from Make Same JS work for different Divisions Elements
No comments:
Post a Comment