How can i make it accessible to touch devices, please provide me the js required.
i want it to slide on touch devices with dots at the bottom and not scroll left/right button.
@media (hover:none), i want to make it slide for touch devices. is it possible? to make it sliding for hover none devices? if yes please help me in this
document.addEventListener('DOMContentLoaded', () => {
// i prefer adding event listeners in javascript.
btnScrollLeft.addEventListener('click', function(e) {
e.preventDefault();
scrollHorizontally(1);
});
btnScrollRight.addEventListener('click', function(e) {
e.preventDefault();
scrollHorizontally(-1);
});
});
function scrollHorizontally(val) {
let c_width = hScroll.offsetWidth,
box_width = sCont.offsetWidth,
amount = val * scrollAmount,
diff = c_width - box_width;
// to calculate the difference, we only need to subtract width of the div containing the cards.
currentScrollPosition = currentScrollPosition + amount;
if (currentScrollPosition > 0) {
// cap start
currentScrollPosition = 0;
btnScrollLeft.style.opacity = "0";
} else if (currentScrollPosition < diff) {
// cap end
currentScrollPosition = diff;
btnScrollRight.style.opacity = "0";
} else {
btnScrollLeft.style.opacity = "1";
btnScrollRight.style.opacity = "1";
}
sCont.style.left = currentScrollPosition + "px";
}
.horizontal-scroll {
overflow-x: hidden;
}
.card-container {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: row;
flex-basis: 30%;
position: absolute;
gap: 10px;
left: 0;
transition: 1s left ease-out;
}
.card-container .card {
min-width: 280px;
flex: 1;
height: 200px;
width: 100%;
border: 1px solid #ccc;
background: #fff;
background: #00F260;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #0575E6, #00F260);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #0575E6, #00F260);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
text-align: center;
justify-content: space-between;
}
.card-container .card img {
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 100%;
float: none;
display: block;
object-fit: fill;
height: 180px;
}
/* btn */
.horizontal-scroll .btn-scroll {
background: 0;
border: 0;
height:20px;
width: 20px;
border: 1px solid red;
padding: 0 10px;
z-index: 10;
cursor: pointer;
font-size: 40px;
color: #007bff;
}
.horizontal-scroll .btn-scroll:hover {
color: #ffffff;
background-color: #007bff;
border-radius: 10px;
}
.horizontal-scroll .btn-scroll:focus {
outline: none;
background-color: #007bff;
color: rgba(255, 255, 255, 1.0);
border-radius: 5px;
}
.horizontal-scroll #btn-scroll-left {
position: absolute;
left: 0;
top: calc(200px/2);
}
.horizontal-scroll #btn-scroll-right {
position: absolute;
right: 0;
top: calc(200px/2);
}
<div class="horizontal-scroll">
<button class="btn-scroll" id="btn-scroll-left">
<i class="fas fa-chevron-left"></i>
</button>
<button class="btn-scroll" id="btn-scroll-right">
<i class="fas fa-chevron-right"></i>
</button>
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
</div>
<!--card-container-->
</div>
<!--horizontal-scroll-->