How do i build a vertical carousel scroller in pure javascript?

user_433073 0
Viewed 173

This is what I want to accomplish

The code is already here, but i do not know how to make it stop at each section. https://codepen.io/ellie_html/full/dyYjZyB

the part of the css that makes the code above work is this

.container {
    height:570px;
    width: 325px;
   
    overflow-y: scroll;

    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(3rem);
    scroll-snap-type: y mandatory;
    position: relative;
    left: 510px;
    top: 50px;
    z-index: 1;
    border-radius: 15px;
    border: none;
}

.tiktok {
    height: 620px;
    width:300px;
    background-color: black;
    scroll-snap-align: start;
}

A vertical carousel scroller just like above, except, it must stop on each section instead of allowing the use to quicky scroll over each section.

I notice google shorts https://www.youtube.com/shorts/3jqhfmUqgZk behave the same way if you scroll down.

Snappy and crisp to the feel. However it also doesnt allow it to stop on each section. If a user scrolls very fast, it will skip over many.

How can this be done in javascript? I have looked at many libraries so far but they all suffer from the same problem. I am trying to modify the code above to make it work.

Or am i recreating the wheel and there is some tiny code out there that already does this?

carousel javascript
2 Answers

Have you tried fullpage.js? You can check its official docs here.

fullPage is an Open Source application licensed under a GPLv3 license. This license allows you to use fullPage in Open Source projects but it requires your project to be public, provide attribution and be licensed under GPLv3.

Here's a contrived example, also available on CodePen:

new fullpage('#fullpage', {
  sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
  // get your license at https://alvarotrigo.com/fullPage/pricing/
  licenseKey: 'YOUR LICENSE KEY HERE '
});
.section {
  text-align:center;
  font-size: 3em;
}
.as-console-wrapper {
  display: none!important;
}
<link rel='stylesheet' href='https://unpkg.com/fullpage.js/dist/fullpage.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js"></script>

<div id="fullpage">
  <div class="section">Section 1</div>
  <div class="section">
    <div class="slide" data-anchor="slide1">Slide 2.1</div>
    <div class="slide" data-anchor="slide2">Slide 2.2</div>
  </div>
  <div class="section">Section 3</div>
  <div class="section">Section 4</div>
</div>

user_142555310

I ended up using this library https://mobius1.github.io/Pageable/#page-1

Set it up in freescroll mode and dragmode. Its also free with no cost, and the snap feel of the scrolls is similar.

It is also done in pure javascript with zero dependencies. Setting it in drag mode also prevents multiple sections from being skipped because a user wont be able to use the scroll wheel.

user_4330730
Related