rxslider

Responsive X-axis Slider

``html rxslider

The basic slider settings are made through CSS variables in the rxslider.css file, as shown below:

`css .rxslider { --lightColor: #fff; --darkColor: #222; --btnSize: 40px; --btnFontSize: 15px; --btnPosition: 20px; --btnPadding: .3em; --navSize: 14px; --navUpper: 25px; --navLower: -35px; --durationHover: .3s; --transitionActive: all .5s; }`

You can override them after including the base slider style file:

`html ...`

The currently active slide is assigned the class «rxslider__active». This allows you to create simple effects for slides, for example:

`html ...`

For an active navigation button, the class «rxslider__nav-active» is used.

The slider takes four attributes. The data-stop attribute without a value disables auto-scrolling:

`html


Attribute data-back without value, changes the scrolling direction of the slider. By default, the slider scrolls to the right, but this can easily be changed:

`html


The data-time attribute specifies the number of milliseconds the slider will pause before moving on to the next slide. By default, this value is 3000 milliseconds, but you can change it:

`html


The data-sens attribute determines how sensitive the slider is when dragging to the next/prev slide. By default, this value is 10. The higher this value, the less distance you need to drag the slide:

`html



A document can have multiple sliders. By default, sliders are center-aligned and stretch to the full width of the parent element.
To limit the maximum width of any slider, simply add an inline style to it:

`html



$3
By default, slides scroll without changing their appearance. A slider allows you to define complex effects applied to its slides.
Slides are all child elements that are inside an element with the class «rxslider__slides»:

`html


Slides do not have their own classes. They are used as an unnamed container and contain other elements, such as images, as in the example above.

To create effects, predefined CSS variables are used, which are stored in the rxslider-vars.css file. This file must be included after the basic slider styles:

`html ...`

The file defines several variables for properties that are most suitable for applying effects. Their names correspond to the names of the properties whose values they define.

For example, the transition property has the variable "--transition", as shown below:

`css transition: var(--transition, revert); transform: var(--transform, revert); transform-style: var(--transform-style, revert); transform-origin: var(--transform-origin, revert); animation: var(--animation, revert); perspective: var(--perspective, revert); perspective-origin: var(--perspective-origin, revert); backface-visibility: var(--backface-visibility, revert); opacity: var(--opacity, revert); color: var(--color, revert); font-size: var(--font-size, revert); background: var(--background, revert);`

The same number of variables exist for the parent of the slides, i.e. for the «rxslider__slides» element. Their names start with the prefix "--parent" followed by the name of the property:

`css transition: var(--parent-transition, revert); transform: var(--parent-transform, revert); transform-style: var(--parent-transform-style, revert); transform-origin: var(--parent-transform-origin, revert); animation: var(--parent-animation, revert); perspective: var(--parent-perspective, revert); perspective-origin: var(--parent-perspective-origin, revert); backface-visibility: var(--parent-backface-visibility, revert); opacity: var(--parent-opacity, revert); color: var(--parent-color, revert); font-size: var(--parent-font-size, revert); background: var(--parent-background, revert);`

The same number of variables exist for direct children of slides, such as images. Their names start with the prefix "--child" followed by the name of the property:

`css transition: var(--child-transition, revert); transform: var(--child-transform, revert); transform-style: var(--child-transform-style, revert); transform-origin: var(--child-transform-origin, revert); animation: var(--child-animation, revert); perspective: var(--child-perspective, revert); perspective-origin: var(--child-perspective-origin, revert); backface-visibility: var(--child-backface-visibility, revert); opacity: var(--child-opacity, revert); color: var(--child-color, revert); font-size: var(--child-font-size, revert); background: var(--child-background, revert);`

You can define new variables in the rxslider-vars.css file for any properties you want to use when creating effects, for example:

`css text-align: var(--text-align, revert);`

All these variables allow you to define properties for the parent, slide and its direct child in a special class that is added after the base styles are connected.

Its name consists of the name of the slider class, a double dash, like variables, and an arbitrary custom effect name, for example:

`css .rxslider--myeffect { --transition: all 2s; --transform: rotate(0) scale(.1); --transform-origin: 80% 20%; --opacity: .1;

transform: rotate(360deg) scale(1); opacity: 1; }`

Then you need to add the name of this class to the slider element:

`html



In the example above, four variables were defined for the transition, transformation, and opacity properties of the slides:

`css --transition: all 2s; --transform: rotate(0) scale(.1); --transform-origin: 80% 20%; --opacity: .1;`

In addition to variables, two properties for transformation and opacity were explicitly defined in the class:

`css transform: rotate(360deg) scale(1); opacity: 1;`

Variables define property values before assigning a special class to the active slide in the window, and properties set explicitly in the class, after this class is added to it.

In this way, you can create a large number of different effects, as shown below:

`html ...``