0.0.3 • Published 3 years ago
mile-slider v0.0.3
Mile slider
Simple, customizable, responsive carousel on vanilla JS. Demo
Install
npm install mile-slider
Usage
- Add a link to the css file:
<link rel="stylesheet" href="https://unpkg.com/mile-slider@0.0.3/src/mile-slider.css">- Add HTML markup:
<div class="mile-slider" id="slider1">
<button class="mile-slider__nav-button mile-slider__nav-button--left">←</button>
<button class="mile-slider__nav-button mile-slider__nav-button--right">→</button>
<div class="mile-slider__content">
<div>
<div>
<img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1459716854666-062eac2da3bd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI5MzI0fQ&auto=format&fit=crop&w=889&q=80" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1437322213019-20ad95053704?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1461703048574-9a342517f1bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjF9&auto=format&fit=crop&w=889&q=80" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1441239372925-ac0b51c4c250?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1455487276747-341d543aa498?ixlib=rb-1.2.1&auto=format&fit=crop&w=755&q=80" alt="">
</div>
<div>
<img src="https://images.unsplash.com/photo-1516655855035-d5215bcb5604?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
</div>- Initialize slider in .js file:
import { mileSlider } from "./node_modules/mile-slider/src/mile-slider.js";or
import { mileSlider } from "https://unpkg.com/mile-slider@0.0.3/src/mile-slider.js";- Call
mileSlider():
mileSlider({
container: 'slider1',
animationDuration: 600,
animationType: 'linear',
height: 332,
slidesToShow: 3,
gap: 24,
activeSlideStyles: {
backgroundColor: '#6554C0',
padding: '16px',
}
});Options
| Option | Type | Description |
|---|---|---|
container | String | Slider container ID |
animationDuration | Number (positive integer) | Time in milliseconds between switching slides |
animationType | String (linear, ease, ease-in, ease-out, etc) | Animation-timing-function |
height | Number (positive integer) | Slider height |
slidesToShow | Number (positive integer) | Number of slides to scroll |
gap | Number (positive integer) | Gap between slides |
activeSlideStyles | Object | CSS styles for active slide |
License
The MIT License.