Css based slider. using scroll snap property

CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. by using this property we can create a simple slider in device without using any additional library

Scroll snapping is used by setting the scroll-snap-type property on a container element and the scroll-snap-align property on elements inside it. When the container element is scrolled, it will snap to the child elements you’ve defined. In its most basic form, it looks like this:

<div class="container">
  <section class="child"></section>
  <section class="child"></section>
  <section class="child"></section>
  <p>...</p>
</div>

.container { 
   scroll-snap-type: y mandatory;
 } 
.child {
   scroll-snap-align: start;
 }

Refer these links for more details

Practical CSS Scroll Snapping

https://www.aritsltd.com/blog/frontend-development/pure-css-slider/