"IviSlider" creates responsive and light-weight slider than can be easily customized. One slide smartly changes another with a little ZoomIn effect. No jQuery!
- IviSlider is a responsive and lightweight customizable slider. You can easily change size, class of title, speed and overlaz for images.
- No jQuery is required!
- Accepts images src and slide titles in json format.
- You can set the height of slider that depends on screen size
- The slider changes size by wondow reize
npm install ivislider#####Usage
Just import Class (for example in the js code that you bundle later with webpack):
import IviSlider from './ivislider/IviSlider';Add a link to css file in your <head>:
<link rel="stylesheet" type="text/css" href="<PATH TO FILE>/ivislider/ivislider.css" media="all">Add empty div with custom class in any place of your html code, for example in footer of the page.
<div class="frontslider"></div>Finally "tell" IviSlider in what element it should be used and add options if necessary
import IviSlider from './ivislider/IviSlider';
var sliderAct = new IviSlider('frontslider');
sliderAct.init();Customize the panel if you want to:
import IviSlider from './ivislider/IviSlider';
var sliderAct = new IviSlider('frontslider', {
titleclass: 'h1',
height: 1,
bottomOffset: 30,
imageLayer: true,
slideSpeed: 7000
});
sliderAct.init();By address '/rest/api/slider' should be accessible JSON: [ 0 => [ 'src' => 'Image src 1', 'text' => 'Slide title 1' ], 1 => [ 'src' => 'Image src 2', 'text' => 'Slide title 2' ], 2 => [ 'src' => 'Image src 3', 'text' => 'Slide title 3' ], ];
The header must have ID = "header"
| Option | Type | Default | Description |
|---|---|---|---|
| bottomOffset | integer | 0 | Defines the distance between slider bottom and window bottom |
| height | integer | 0.5 | Part of screen that should be the height of slider with a deduction of header Height (for example: use 1 if you want to have fullscreen slide) |
| titleclass | string | 'h2' | Class of title of each slide |
| language | string | 'en' | Prefix of default language (important for multilanguage sites) |
| imageLayer | boolean | false | defint if you want to have a transparent black overlay between image and title |
| lineWithSpan | boolean | false | define if you want to add a span line under the slide title (you`ll need to add your own css) |
| slideSpeed | integer | 0 (ms) | Defines the speed of slides change |
IviSlider works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
Copyright (c) 2018 tstudio
Licensed under the MIT license.