This plugin is an image slider written in pure CSS3 and HTML5. It is part of Formir Framework but can operate independently.
The slider plugin will fully work only with CSS and HTML. All of the logic is based on CSS and <input/> tag elements, that are required.
Slider have manually (button control or class name control) and automatic function of dark mode, you can set your colors for both modes.
Copy formir-slider.min.css or formir-slider-dots.min.css file to your application direction.
Copy code below and paste into your HTML file at a <head> part.
Copy slider code below and paste into your site body and modify item items and images.
This plugin is written in less (and optional sass) dynamic preprocessor style sheet language (CSS).
It is part of Formir CSS Framework. Formir gives you an idea of how to neatly sort and attach style files before compiling them in your project during the development phase.
You can use this approach or attach the only source of slider plugin formir-slider.less.
In the documentation we focus on less preprocessor, but the same file structure and mixin / variables is used for SASS (scss), to know how to install & to compile sass file go to Sass documentation
Start with copy all files to your root direction:
src - your application root path
less - your less or sass direction
formir
core
mixins - less mixins
display.less
flex.less
functions.less
plugins
slider.less - all style and settings for slider plugin
formir-slider.less - your root file that imports all of other files
fonts - icons for slider
slider.woff
...
Include formir-slider.less into your project.
In this step, you can include formir-slider.less to your main less file, or move the content of formir-slider.less to your main (manifest/root) less file.
Use developer mode of less library, or compile less using backend (ex. webpack).
To use .less file on your page look at less configuration page.
Add in your <head> tag with your HTML file on developer mode:
In production mode, you can also use less npm package to compile your own min.css file. Use lessc command in bash, for example:
$ npm install -g less
$ lessc -x less/formir-slider.less css/formir-slider.min.css
Slider is fully configurable, each of colors, borders etc. you can change in less file less/formir/plugins/slider.less.
See all configurations of less file.
Pure CSS gives us some limits, before a start, please set up a maximum number of items in your slider before compiling the project, remember The higher the number you choose, the more your CSS will weigh.
@slider-max-items: 30; // number of max count of items / items
... more
Set up your background item color, colors of UI elements.
@light-slider-body-background: #fff;
@light-slider-text-color: #2d2d2d;
@light-slider-button-background: #3c3642;
@light-slider-button-color: #fff;
@light-slider-button-border: 0 none;
@light-slider-button-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
@light-slider-button-shadow-hover: 0 0 5px rgba(0, 0, 0, 0.7);
@light-slider-button-current-background: #fff;
@light-slider-button-current-border: 0 none;
@light-slider-button-current-color: @light-slider-button-background;
@light-slider-button-current-shadow: none;
... more
There is 2 way to turn on dark mode:
input controlslider, just add next class slider-dark - remember to remove input control
@dark-slider-body-background: #1c1e24;
@dark-slider-text-color: #fff;
@dark-slider-button-background: #fff;
@dark-slider-button-color: #000;
@dark-slider-button-border: 0 none;
@dark-slider-button-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
@dark-slider-button-shadow-hover: 0 0 5px rgba(0, 0, 0, 0.7);
@dark-slider-button-current-background: #000;
@dark-slider-button-current-border: 0 none;
@dark-slider-button-current-color: #fff;
@dark-slider-button-current-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
... more
You can use less mixing to quickly change the whole parts of the style.
.icon-slider() {
}
.slider-pagination-current() {
}
.slider-button(@size: @slider-button-size) {
}
.slider-button-pagination() {
}
.slider-fullscreen-button(@size: @slider-button-size-icon) {
}
.slider-prev-button(@size: @slider-button-size) {
}
.slider-next-button(@size: @slider-button-size) {
}
... more
Change class name of all elements to prevent name duplicate on your app.
@slider: slider; // main wrapper
@slider-dark: slider-dark;
@slider-fade: slider-fade;
@slider-no-animation: slider-no-animation;
@slider-body: slider-body; // body of slider
@slider-arena: slider-arena; // next wrapper coled arena
@slider-item: item; // item to display on the item
@slider-item-image: item-image; // image container
@slider-paginations: paginations; // pagination wrapper
@slider-navigations: navigations;
@slider-ratio-fixed: ratio-fixed;
@slider-ratio-2-1: ratio-2-1;
@slider-ratio-4-3: ratio-4-3;
@slider-ratio-1: ratio-1;
@slider-ratio-16-9: ratio-16-9;
@slider-ratio-21-9: ratio-21-9;
@slider-image-cover: image-cover;
@slider-image-contain: image-contain;
@slider-fullscreen-toggle: fullscreen-toggle;
@slider-fullscreen-trigger: fullscreen-trigger;
... more
Plugin work without JS so we control your slider with <input/> tag, each separate input for each item on the slider.
Inputs and labels are related with id and for an attribute, so for each item, we will need one input, one label for navigating (next / prev), and one label for dot (for jump). That is all the logic that you need to know.
If you put many slider in one page use also unique ID for each <input/> tag in your slider code, also a group of <input/> must have the unique NAME attribute.
Try to not include your slider <input/> within <form> tag if you don't must, other wide you have to clean input element before sent form if you don't have any undesirable effects.
Some browsers save state of <input/> - if you do not want this future just set AUTOCOMPLETE="off" attribute to each <input/>.
Slider support 3 kinds of dimensions: ratio, free and fixed
| function class | html element to add class | |
|---|---|---|
| none | slider | ratio of gallery will be automatically set by dimensions of images |
| ratio-1 | slider | ratio of gallery will 1 to 1 |
| ratio-2-1 | slider | ratio of gallery will 2 to 1 |
| ratio-4-3 | slider | ratio of gallery will 4 to 3 |
| ratio-16-9 | slider | ratio of gallery will 16 to 9 |
| ratio-21-9 | slider | ratio of gallery will 21 to 9 |
| ratio-fixed | slider | with this class you can set own dimension using padding-bottom on slider-body or height |
There is two option of the size of the image: cover size or contain size. Look at object-fit css set.
| function class | html element to add class | |
|---|---|---|
| none | any tag inside slider above img or picture | default object-fit is set to cover |
| image-cover | any tag inside slider above img or picture | object-fit set to cover |
| image-contain | any tag inside slider above img or picture | object-fit set to contain |
Slider support 3 types of animation, slide on sides, fade, or no-animation.
| function class | html element to add class | |
|---|---|---|
| none | slider | default animation set to slide - move: right & left |
| slider-fade | slider | images will fade (opacity function) form prev to next one. |
| no-animation | slider | will turn off animation |
The slider has a function to switch to full screen mode, in that case, you can switch to this mode by clicking the button.
Look at an example (sandbox below) of how to use fullscreen switches and triggers.
The slider has a function to manually switch to dark mode, you can switch to this mode by clicking the button. Dark mode will automatically turn on when the browser is using dark mode.
| function class | html element to add class | |
|---|---|---|
| none | slider | default slider is set to auto mode, dark will be use dark variables, light will be use light variables. |
| slider-dark | slider | slider will be set to dark mode |
Use this mockup:
Go to file less/formir/plugins/slider.less and change your config
You can specify class names for html elements, for example, to avoid name collisions in your app, remember to change classes also on your html:
/// CLASSES (name: defualt;)
@slider: slider; // main wrapper
@slider-dark: slider-dark;
@slider-fade: slider-fade;
@slider-body: slider-body; // body of slider
@slider-arena: slider-arena; // next wrapper coled arena
@slider-item: item; // item to display on the item
@slider-item-image: item-image; // image container
@slider-paginations: paginations; // pagination wrapper
@slider-navigations: navigations;
@slider-ratio-fixed: ratio-fixed;
@slider-ratio-2-1: ratio-2-1;
@slider-ratio-4-3: ratio-4-3;
@slider-ratio-1: ratio-1;
@slider-ratio-16-9: ratio-16-9;
@slider-ratio-21-9: ratio-21-9;
@slider-image-cover: image-cover;
@slider-image-contain: image-contain;
@slider-fullscreen-toggle: fullscreen-toggle;
@slider-fullscreen-trigger: fullscreen-trigger;
/// CORE
@slider-max-items: 30; // number of max count of items / items
@slider-button-dot: false;
/// VARIABLES
@slider-spin-speed: 1s;
@slider-spin-timing: ease-in-out;
@slider-fade-speed: 1.5s;
@slider-fade-timing: ease-in-out;
@slider-text-font-size: 14px;
@slider-text-font-size-mobile: 2vmin;
@slider-font-line-height: 1.3em;
@slider-text-margin-top: 1.5rem;
@slider-text-max-height: 20%;
@slider-text-min-height: 15%;
@slider-text-max-width: 70%;
@slider-text-padding: 20px 0;
@slider-navigations-margin: 20px;
@slider-button-size: 30px;
@slider-pagination-button-size: 15px;
@slider-pagination-buttons-space: 3px;
@slider-buttons-position: 5%; // horizontally (y)
@slider-button-dark-position: 10%;
@slider-button-dark-width: @slider-button-size;
@slider-pagination-position: 5%;
@slider-button-transition: opacity 0.5s linear;
@slider-button-next-icon: "\e908";
@slider-button-prev-icon: "\e907";
@slider-button-fullscreen-icon: "\e909";
@slider-button-fullscreen-off-icon: "\e90b";
@slider-button-size-icon: 60px;
// Css variables - you can use this variables to modify colors (if you use static ligth or dark mode) without less/sass compiler
@slider-body-background: var(--slider-body-background);
@slider-text-color: var(--slider-text-color);
@slider-button-background: var(--slider-button-background);
@slider-button-color: var(--slider-button-color);
@slider-button-border: var(--slider-button-border);
@slider-button-shadow: var(--slider-button-shadow);
@slider-button-shadow-hover: var(--slider-button-shadow-hover);
@slider-button-current-background: var(--slider-button-current-background);
@slider-button-current-border: var(--slider-button-current-border);
@slider-button-current-color: var(--slider-button-current-color);
@slider-button-current-shadow: var(--slider-button-current-shadow);
// Light theme:
@light-slider-body-background: #fff;
@light-slider-text-color: #2d2d2d;
@light-slider-button-background: #3c3642;
@light-slider-button-color: #fff;
@light-slider-button-border: 0 none;
@light-slider-button-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
@light-slider-button-shadow-hover: 0 0 5px rgba(0, 0, 0, 0.7);
@light-slider-button-current-background: #fff;
@light-slider-button-current-border: 0 none;
@light-slider-button-current-color: @light-slider-button-background;
@light-slider-button-current-shadow: none;
// Dark theme:
@dark-slider-body-background: #1c1e24;
@dark-slider-text-color: #fff;
@dark-slider-button-background: #fff;
@dark-slider-button-color: #000;
@dark-slider-button-border: 0 none;
@dark-slider-button-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
@dark-slider-button-shadow-hover: 0 0 5px rgba(0, 0, 0, 0.7);
@dark-slider-button-current-background: #000;
@dark-slider-button-current-border: 0 none;
@dark-slider-button-current-color: #fff;
@dark-slider-button-current-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
.icon-slider() {
}
.slider-pagination-current() {
}
.slider-button(@size: @slider-button-size) {
}
.slider-button-pagination() {
}
.slider-fullscreen-button(@size: @slider-button-size-icon) {
}
.slider-prev-button(@size: @slider-button-size) {
}
.slider-next-button(@size: @slider-button-size) {
}