Carousel
- Has touch support
- Sliding can be animated with CSS transitions
- Active slide is changed based on swipe speed, rather than distance
- Pure CSS option for infinite sliding (via CSS flex order)
- Gap between items is controlled with CSS
- Items per row is controlled with CSS and works responsively
<div ob-carousel>
<div ob-carousel-rail="infinite: true">
<div ob-carousel-rail-item>1</div>
<div ob-carousel-rail-item>2</div>
<div ob-carousel-rail-item>3</div>
<div ob-carousel-rail-item>4</div>
</div>
</div>
[ob-carousel-rail] {
display: flex;
flex-flow: row nowrap;
position: relative;
}
[ob-carousel-rail]:not(.is-dragged) {
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
[ob-carousel-rail-item] {
flex-shrink: 0;
width: calc(50% - 10px);
margin-right: 20px;
}
import { Watcher } from 'oblik'
import { Carousel } from 'oblik/components/carousel'
let w = new Watcher(document.body, {
components: {
carousel: Carousel
}
})
w.init()
# Components
rail
contains all slides and it should have CSS applied to it that orders the slides on a single rowitem
(multiple) are the slides and can have horizontal CSSmargin
applied to make gaps between them
next
moves to the next slide on clickprev
moves to the previous slide on click
# Options
All the following options are applied to the rail
component.
#
infinite
Whether the carousel can be scrolled indefinitely.
Default: false
#
itemsPerScreen
Although you can control items per screen via CSS, you can explicitly specify it.
#
overdrag
Ratio for how far the user can drag beyond the first/last item. If the carousel width is 400px
and overdrag
is 0.5
, then the distance will be 200px
.
Default: 0.3
#
screenChangeSpeed
The minimum swipe speed (in pixels per second) that is needed to change the active slide.
Default: 500
#
clickThreshold
If the user dragged less pixels than this value, the drag will be considered a click. This is needed for when the slide is also and <a>
tag.
Default: 40