ARTICLE AD BOX
I managed this much to get swipe working on mobile devices and it does work on desktops too (macOS and Windows) using the mouse / trackpad swipe action. But I can't get it to work using mouse slide.
Is there a way to get the mouse slide action working using native CSS ? Or even maybe using native JavaScript / AlpineJS for the slide actions ?
.swiper
{
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
gap: 0;
padding: 0;
margin: 0 auto;
width: 100%;
max-width: 600px;
overscroll-behavior-x: contain;
}
.swiper::-webkit-scrollbar
{
display: none;
}
.slide {
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
height: 384px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
border-radius: 12px;
}
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<div class="swiper" x-data="">
<template x-for="(item, index) in [...Array(84).keys()].map(i => i + 1)">
<div class="slide">
<img :src=`https://raw.githubusercontent.com/anjanesh/Slide/refs/heads/master/moorthy/img${index}.png` alt="fig" width="512" height="384" />
</div>
</template>
</div>
