Author: | metxnbr |
---|---|
Views Total: | 3,251 views |
Official Page: | Go to website |
Last Update: | June 19, 2019 |
License: | MIT |
Preview:

Description:
awesome-slider is a lightweight, customizable, mobile-friendly swiper/carousel plugin written in pure JavaScript.
Main features:
- Supports any HTML content: images, text, etc.
- Auto rotation.
- Custom Indicator.
- Custom image loader.
- Supports mouse drag and touch swipe events.
- Auto adjusts the size on resize.
How to use it:
Install & download.
# Yarn $ yarn add awesome-slider # NPM $ npm install awesome-slider --save
Import the minified version of the awesome-slider library into the document.
<script src="./dist/awesome-slider.min.js"></script>
Define an array of images or any web contents as follows:
var myImages = ["./assets/1.png", "./assets/2.png", "./assets/3.png"]; // or var myContent = [ { tagName: "div", attrs: { style: "width:100%; height: 100%; background-color: pink; font-size: 32px; color: #fff;" }, children: [ "It's not just picture", { tagName: "div", attrs: { style: "width:100%; height: 100%; background-color: pink; font-size: 14px; color: #fff;" }, children: [ "text text text text text text text text text text text text text" ] } ] }, { tagName: "a", attrs: { href: "2.png", style: "width:100%; height: 100%", target: "_blank" }, children: [ { tagName: "img", attrs: { src: "./assets/2.png", style: "width:100%; height: 100%" } } ] }, { tagName: "img", attrs: { src: "./assets/3.png", style: "width:100%; height: 100%" } }, { tagName: "img", attrs: { src: "./assets/none.png", style: "width:100%; height: 100%" } } ]
Generate a default swiper/carousel on the page.
var awesomeSlider = new AwesomeSlider(myImages, container, options);
Possible options to config the swiper/carousel.
var awesomeSlider = new AwesomeSlider(myImages, container, { // ratio ratio: 5 / 1, // autoplay autoplay: true, // duration in ms duration: 5000, // interval in ms interval: 3000, // custom indicator // false or null: disable indicator: { style: Function, active: Function, }, // 1 = Slide 2 initIndex: 0, // custom controls manual: { previous: previous, next: next }, // animation timing: Function | String, // auto resize the swiper/carousel enableResize: true, // image loader imageDownloading: Object, // image placeholder imagePlaceholder: Object, // additional CSS class(es) className: { list: '', item: '' } });