.carousel

The carousel is based on the native horizontal scrollbar, which basically works even before JS loaded. In other words it works as it is without running any calculations. On smart phones it is scrolled by swipes. On desktops by touchpad.

However, on desktops this is not so obvious, so we add arrow buttons. Clicking them simply scrolls the area to the width of a few tiles. More precisely, the width of the tile multiplied by the value, passed in data-step="3".

Details

• .carousel--initialized class shows arrows that are hidden by default. This is necessary for two reasons. Firstly, to show arrows only after JS was loaded (which, however, is not very relevant in SPA). Secondly, show them only when the carousel is really needed to be run (enough items to scroll).
• Class .carousel--being-scrolled-by-arrow -- is being added for the time of scrolling. It is needed to prevent a second click on the arrow button while the animation from the previous click has not yet ended.
• It is expected that all carousels will work inside .container. All carousels have standard container margins. On 992+ all the margins are reset and the carousel scrolls inside the container.
• Also we assume that the spacing between items on mobile widths is equal to the container's padding. At 992+ it is strictly 20px.
• .carousel__ribbon element has width: 100%, although it would be logical for this layer to become a long ribbon equal in width to all items and indents in total. But this is done so that percentages can be used inside on items. Eg make four columns with width: calc(25% - 15px);. Such .carousel__ribbon basically works the same. It scrolls normally. The only thing is that the right padding does not work at the end of a ribbon. And this is fixed via pseudo-element.

.carousel--skin-venue

This modifier is created with .venue in mind. Those tiles require special treatment because there the shadow is clipped by the overflow of the carousel. Plus there are specific widths of tiles at different resolutions.