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...
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
}
});