CSS and Javascript Ant Carousel

With the advent of CSS3, it became possible to make animations without using JS libraries, such as, for example, jQuery. The CSS3 transition property allows you to smoothly change other properties of an element (width, height, margin, opacity, etc.), setting the time and law of transformation as parameters. I offer a small, but quite functional carousel in pure Javascript. Small as an ant, which is much smaller than an owl . But with almost the same capabilities.

Ant-carousel allows you to:

• show one or more elements;
• elements can be shown in the form of a finite or infinite ribbon (in a loop);
• auto-scroll items;
• navigation is carried out by arrows, indicator points or turning over (for tactile screens);
• automatically adjusts to any screen width.

We put our carousel in the index.html file (see the example file below):


The <ul> <li> elements are used here, but <div> <div> can be used instead, if you prefer. Arrows and indicator points are positioned absolutely in the respective containers. For arrows, patterns in the form of triangular brackets are used, which, if desired, you can replace with your patterns or image generation with the pseudo-elements : before and : after .

Create a carousel with three visible elements and an element width of 270 pixels. Then the maximum carousel width is 810 pixels. We include the CSS file:


We place the elements in the ant-carousel-list container, set the display: flex property for it and press all the elements to the left edge of justify-content: flex-start . The flex property : 0 0 auto sets flex-shrink to 0 (default is 1). Scrolling of the carousel elements is carried out using the transiton property by smoothly changing the margin-left indent from zero to the width of the element (in one direction) or from the width of the element to zero (in the other direction). For the transform (scroll) function, the value of ease is used .

We pass to the program. In the program options you can configure:

• number of visible elements;
• viewing elements in the form of a tape from the first to the last or in an infinite loop (the tape closes in a ring);
• automatic or manual scrolling of elements;
• auto scroll interval;
• animation speed;
• enable / disable navigation elements: arrows, indicator points, flipping by touch (for tactile screens).

Initialization of the program begins with the fact that the number of carousel elements is determined, initial values ​​are assigned to internal variables, event handlers are assigned to arrows and points (if connected). If the automatic scrolling option is enabled, additional handlers are assigned that stop scrolling when you mouse over the carousel elements. Touch scrolling is triggered if there is more than 20 pixels between the point where the finger touches the screen and the point the finger is torn off the screen and the total time the finger touches the screen is less than 80 ms. The author does not yet have much experience working with this carousel, so perhaps the values ​​given need to be clarified. For a more reliable operation of the scroll handler, the distance between the points may be reduced to 10 or 15 pixels, and the touch time should be increased to 100 or 120 ms. The user of this carousel can correct these values ​​himself after acquiring some experience in its use.

The scrolling algorithm for elements differs depending on whether the loop option is enabled or not. If enabled, when scrolling to the right ( elemPrev function), the margin-left property of the entire line of this.crslList elements decreases from zero to a negative value equal to the width of the elemWidth element. At the same time, the last element on the right is cloned and inserted before the first element, after which the last element is deleted. The line is assigned the property 'transition: margin' + options.speed + 'ms ease' , where options.speed is the animation speed, ease is the animation function. Now you can scroll. The margin-left property changes smoothly from a negative value to zero, the entire ruler smoothly shifts to the right, and the last item comes first. After options.speed microseconds, the line is given the same value as 'transition: none' .

 var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed); 

If you need to scroll n elements at the same time, the permutation of the elements is carried out in a loop n times, and the margin-left distance increases n times.

Scrolling to the left ( elemNext function) occurs in the reverse order. First, this.crslList line is assigned the property 'transition: margin' + options.speed + 'ms ease' and the line smoothly scrolls to the left ( crslList.style.marginLeft = '-' + elemWidth + 'px' ). Further, after options.speed microseconds, the first element is cloned and inserted at the end of the ruler, after which the first element is deleted. The ruler returns the value 'transition: none'. If you need to scroll n elements at the same time, the rearrangement of elements, as in the previous case, is performed n times in a loop and the margin-left distance increases n times.

 var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed); 

If the loop option is disabled, then in this case there are no permutations of the elements, and the entire line of elements is shifted as a whole to the left or right to its extreme points. The line of elements this.crslList property 'transition: margin' + options.speed + 'ms ease' is assigned even when the carousel is initialized and is no longer deleted.

The carousel is called by the name of the ant-carousel class or by identifier. In the second case, you can place several carousels on one page. A carousel index.html file might look like this:

 <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Ant-Carousel</title> <!--   --> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> <!--    --> … </div> … <footer> … </footer> <!--   --> <script src="ant-files/ant-carousel. js"></script> <!--   --> <script>new Ant()</script> </body> </html> 

To place several carousels on one page, you need to call them by ID. Different carousels may have a different number of elements.

 <div class="ant-carousel" id=”first”> <!--   --> … <div class="ant-carousel" id=”second”> <!--   --> … <script>new Ant(“first”); new Ant(“second”);</script> 

All images are taken from open sources.

Thanks for your attention!