Standalone javascript library to make carousel component.
<div class="nyelider" id="nyelider-1">
<div class="nyelider-inner">
<div class="nyelider-grid">
<!-- you can add more nyelider item -->
<div class="nyelider-item"></div>
<div class="nyelider-item"></div>
<div class="nyelider-item"></div>
</div>
</div>
<!-- control -->
<div class="nyelider-control">
<div class="nyelider-prev">
<!-- add icon here -->
</div>
<div class="nyelider-next">
<!-- and also here -->
</div>
</div>
<!-- if you enable withIndicator options, you must have add this element -->
<div class="nyelider-indicator"></div>
</div>
after you load the nyelider code. just put this code below.
el
[string]: The target element, by default.vlider
, but if you have more than one carousel you must set this option with different target element.size
[number]: Column size, by default3
.withIndicator [boolean]
: Adding clickable indicator icons. default isfalse
.autoPlay [boolean]
: autoplay the carousel. By default isfalse
.delay
[number]: delay of autoplay, if you are not yet set theautoPlay
option totrue
, you don't need this option. By default is3000
.
document.addEventListener('DOMContentLoaded', function() {
var nyelider = new Nyelider({
/*
* if you want to make more than one carousel in one page, you must to set this option to given id of element with class='nyelider'
*/
el: '#nyelider-1',
/*
* the size of grid, default is 3
*/
size: 2,
// to add indicator icons, default is false
withIndicator: true
})
});
if you add with-shadow
class on class="nyelider", it will add shadow white at edge.
- Styling
- Functionality with JS
- AutoPlay Feature