Basic

Peculiarities

On this page I have implemented some solutions that in one or another variation will be suitable for many layout tasks. The emphasis is on JS-solutions.

In each card you can place many sliders, for example, for different options for one product
The color of each switch can be set separately through a special arbitrary attribute
When hovering on a slider, a cloud appears mouse cursor, which moves behind it even when dragging the image
Navigation buttons change their appearance at the approximation of the cursor to them and return to their original state when it is given
Double click plug on a slider with Big image, except for the navigation buttons, only in the image
On mobile devices for album Popap orientation is not launched, instead the cards are expanding, so it just not needed

The work of the plug is demonstrated to Example slider and triggers on double click on a slider with a large image
When the rear background appears,
Opens in the image on which was called
Closes by click outside the body Popap, according to a special button inside the body of the plug and the ESC button
After closing the SPIAP slider is cleaned and ready for new application

By pressing the menu buttons transition To the corresponding block
During the transition or with a simple scroll Pages, by changing the color of the menu item, you can determine which block we are now We see
You can adjust the transition speed individual for each block

They open smoothly
Close smoothly)))
Close by pressing the cap and for the limits of the block of spoilers
Different options for opening indicators and closing

The effect of the parallax of the background image at scroll
Parallax effect when mouse moves
Parallax of the elements of the block

Units of measurements EM and REM are used
Geder menu is different, depending on What device: touchscreen or ordinary PC
On small mobile devices at the album orientation is not launched, instead the cards are expanded, so that he just doesn't need
Sliders arrows are different, depending on what device: touchscreen or ordinary PC

Cards with several sliders

Parallax background

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium minima recusandae velit? Exercitationem sequi et voluptate, iusto, repellendus nihil hic corrupti molestiae velit, dolorem animi accusantium consequatur culpa aut nisi.

Spoilers

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum pariatur voluptatibus, temporibus velit nulla earum fugiat, autem obcaecati laudantium, dignissimos corporis! Praesentium eveniet at optio omnis eius cupiditate repudiandae ea.

Peculiarities

Cards with several sliders

Parallax background

Spoilers

Ordinary parallax