javascripthtmlvelocity

Velocity.js: scroll element's x-axis


I want to scroll #carousel 500px on x-axis. But I can't understand why velocity function does not do anything... Where is a mistake?

HTML:

   <div class="carousel" id="carousel">
     <div class="carousel__scroller" id="carousel__scroller">
       <ul>
         ...
         <li class="carousel__item">...</li> 
         ...
       </ul>
     </div>
   </div>

SCSS:

.carousel {
    position: relative;
    top: 20px;
    height: 150px;
    z-index: 2;
    outline: 1px solid black;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;

  &__scroller {
    position: absolute;
    background: lightgreen;
    width: 375000px;
    height: 100%;

    ul {
      height: 100%;

      li {
        height: 100%;
        line-height: 40px;
        background: lightgreen;
        position: absolute;
        outline: 1px solid white;
        padding-left: 10px;
        width: 100vw;
        float: left;
      }
    }
  }
}

JS:

...
    $('#carousel').velocity("scroll", {
       axis: "x",
       offset: "500px",
       duration: 250,
       easing: "ease-in-out"
    });
...

UPDATE

jQuery alternative works well:

$('#carousel').animate({
    scrollLeft: '500'
}, 250);

But I still want to use Velocity.js. Still no luck with it...


Solution

  • The problem was.. I forgot to provide a container.

    This is a working example:

        $carouselScroller
            .velocity('scroll', {
                container: $carousel,
                offset: slide * screen.width,
                duration: 200,
                axis: 'x',
                easing: 'linear',
                complete() {
                    //some onComplete fn
                }
            });