This project presents an example of a simple vanilla javascript carousel/slider built with the power of CSS3 Flexbox layout. The design is responsive and styled with SCSS.
CSS3 Flexbox is a powerful layout technique well supported by all modern browsers. It has all needed to build a responsive slider reqiring a minimum of javascript code.
Demo shows a few slider examples to illustrate how flexbox layout is used. This design is build around the flexbox property order: N. Reordering of flexbox carousel items by changing this property allows for smooth looping effect without the need to clone items in DOM.
The following images are snapshots of DOM elements in a browser development window. They show an example of a text based carousel. The first snapshot shows an initial ordering of slider items with a schematic view of carousel elements in browser viewport and carousel container. The order value is seen at the corresponding slider item.
The carousel element includes all carousel items lined up using flex-direction:row with ordering ready for a move left by one step. After move animation is finished, items are reordered simultaneously with a reset of horizontal position. This phase is shown at the next snapshot.
Finally, one more move-reorder-reset step is given at the next snapshot. As we can see the smooth scroll of slider items can be achieved with Flexbox without the need to clone carousel elements.
More detail with live carousel in action can be seen on Demo.
Responsive features are made with CSS media queries. To simplify the design of responsive layout and breakpoint selection a SCSS mixin is used. Breakpoints (in px) and corresponding number of visible items (n) are configured in src/scss/main.scss as follows:
$carousel-breakpoints: (
// px n
0 : 1,
480: 2,
800: 3,
1200: 4
);
@include carousel-bp('#carousel', $carousel-breakpoints, 6);
Note the total number of carousel items as the last argument of the carousel-bp() mixin.
Released under the MIT License - see the LICENSE file for details.