Author: | vadimbogomazov |
---|---|
Views Total: | 1,306 views |
Official Page: | Go to website |
Last Update: | March 16, 2017 |
License: | MIT |
Preview:

Description:
CrystalSlider.js an independent vanilla JavaScript plugin that lets you create a responsive, drag/touch-enabled and user-friendly image slider/carousel for your web applications.
Install the CrystalSlider via NPM:
# NPM $ npm install CrystalSlider
How to use it:
Insert the Crystal Slider’s JavaScript and CSS files into the webpage.
<link rel="stylesheet" href="dist/crystalslider.min.css"> <script src="dist/crystalslider.min.js"></script>
Insert your images together with the descriptions into the carousel.
<div class="crystal-slider"> <div data-crystal-title="Slide description"> <img src="1.jpg" alt=""> </div> <div data-crystal-title="Slide description 2"> <img src="2.jpg" alt=""> </div> <div data-crystal-title="Slide description 3"> <img src="3.jpg" alt=""> </div> <div data-crystal-title="Slide description 4"> <img src="4.jpg" alt=""> </div> </div>
Initialize the carousel by creating a new CrystalSlider object as this:
const crystalSlider = new CrystalSlider();
API methods:
const crystalSlider = new CrystalSlider(); // slides to the previous image crystalSlider.prevSlide() // slides to the next image crystalSlider.nextSlide() // slides to a specified image crystalSlider.goToSlide(index) // returns true if the option is enable crystalSlider.isEnabledOption(option) // destroy the slider crystalSlider.destroy() // re-init the slider crystalSlider.reinit(options)
Default options to customize the carousel.
const crystalSlider = new CrystalSlider({ selector : `.${sliderCls}`, activeSlide : 1, loop : true, fade : false, duration : 500, draggable : true, adaptiveHeight : false, threshold : 30, titles : false, keyboard : false, easing : 'ease-out', // Nav nav : true, navPrevVal : 'Prev', navNextVal : 'Next', // Pagination pagination : false, thumbnails : false, zIndex : 98, // Callbacks onReady : function () {}, beforeChange : function () {}, afterChange : function () {}, });