I'm trying to make a JavaScript slider which needs to work on both mobile and desktop. It should be possible to click on each and every card which should redirect me to another page.
At this moment I've got a working slider but I cannot click on any of the cards. This is caused by pointer-events: none; but the slider won't work without this line.
Does anyone know how to do this right or how I can approach this in other ways?
Thanks in advance,
let slider = document.querySelector(".slider");
let innerSlider = document.querySelector(".slider-inner");
let pressed = false;
let startx;
let x;
//pc controls
slider.addEventListener("mousedown", (e) => {
pressed = true;
startx = e.offsetX - innerSlider.offsetLeft;
slider.style.cursor = "grabbing";
});
slider.addEventListener("mouseevent", () => {
slider.style.cursor = "grab";
});
slider.addEventListener("mouseup", () => {
slider.style.cursor = "grab";
});
slider.addEventListener("mouseup", () => {
pressed = false;
});
slider.addEventListener("mousemove", (e) => {
if (!pressed) return;
x = e.offsetX;
let temp = x - startx;
innerSlider.style.left = temp "px";
checkboundary();
});
function checkboundary() {
let outer = slider.getBoundingClientRect();
let inner = innerSlider.getBoundingClientRect();
if (parseInt(innerSlider.style.left) > 0) {
innerSlider.style.left = "0px";
} else if (inner.right < outer.right) {
let temp = inner.width - outer.width;
innerSlider.style.left = -temp "px";
}
}.componentContainer {
display: block;
height: 220px;
position: relative;
width: 1200px;
margin: auto;
}
.slider {
position: absolute;
width: inherit;
height: 150px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.slider-inner {
position: absolute;
top: 2px;
left: 0;
display: flex;
gap: 15px;
pointer-events: none;
transition: 0s ease-in;
padding: 0 5px;
}
.slider-card {
height: 140px;
text-align: center;
width: 240px;
border-radius: 10px;
box-shadow: 0px 4px 8px #dbdbdb;
position: relative;
}
.slider-card a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
height: inherit;
position: absolute;
width: 100%;
}<div class="componentContainer">
<h2>Onze promo's</h2>
<div class="slider">
<div class="slider-inner">
<div class="slider-card" onclick="window.location.href='/test'">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
</div>
</div>
</div>CodePudding user response：
<div class="componentContainer">
<h2>Onze promo's</h2>
<div class="slider">
<div class="slider-inner">
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a slider-card>
<span>test</span>
<span>lorem</span>
</a>
</div>
<div class="slider-card">
<a href="#">
<span>test</span>
<span>lorem</span>
</a>
</div>
</div>
</div>
</div>
Add A link first so you know it is clickable with the href. Then you can just make a function on taping the class of the cards like
$('.slider-card').on('click',()=>{...do smth...});
CodePudding user response：
I don't know this could be helpful or not, but I think you can detect user click by calculating slider left position on the mousedown and mouseup event, if in both events, slider's left position is the same, then you cand consider click has happened and do wathever you want when user clicks on one of the slides by JS. Something like this:
slider.addEventListener("mousedown", (e) => {
pressed = true;
startx = e.offsetX - innerSlider.offsetLeft;
slider.style.cursor = "grabbing";
sliderLeftPos = innerSlider.offsetLeft;
});
slider.addEventListener("mouseup", (e) => {
slider.style.cursor = "grab";
const sliderCurrentLeftPos = innerSlider.offsetLeft;
if (sliderCurrentLeftPos == sliderLeftPos) {
alert('click');
}
});
I've implemented my idea (no't detailed one) here: https://jsfiddle.net/saeed_shamloo/seyqp0gb/
I don't know it will help or not but I hope so.