CrystalSlider.js is a standalone vanilla JavaScript plugin that allows you to create a responsive, drag/touch-enabled, easy-to-use image scrollbar/carousel for your web applications.
responsive automatic image slider in html, image gallery slider, slider for mobile view, beautiful carousel slider, pure javascript image slider, responsive slider free download
Features
- Lightweight slider with minimal required functionality written in vanilla JS;
- no dependencies
- Responsive
- Touch device support
- Easy to use
Lightweight and Supports Touch Swiper Slider in Pure JavaScript | Tiny-Swiper
How to make use of it:
Installation:
npm install crystalslider
1. Create a <div class=”crystal-slider”> and a <div> inside for each slide:
<div class="crystal-slider">
<div>
<img src="img/slide-1.jpg" alt="">
</div>
<div>
<img src="img/slide-2.jpg" alt="">
</div>
<div>
<img src="img/slide-3.jpg" alt="">
</div>
</div>2. Include crystalslider.css and crystalslider.min.js:
<link rel="stylesheet" href="css/crystalslider.css"> <script src="js/crystalslider.min.js"></script>
3. And the last step – calling the plugin by selecting the desired delimiter in the options:
<script>
const crystalSlider = new CrystalSlider({
selector: 'your-selector' // .crystal-slider – default selector
});
</script>API
Methods
| prevSlide() | slides to the previous slide |
| nextSlide() | slides to the next slide |
| goToSlide(index) | slides to a slide with the set index (option {Number}) |
| play() | start auto changing slides |
| stop() | stop auto changing slides |
| isEnabledOption(option) | returns true if the option is enable (option {String}) |
| destroy() | destroy the slider instance |
| reinit(options) | slider reinit with new options (options {Object}) |
Mobile-friendly Image Carousel, Crystal Slider Plugin/Github
See Demo And Download
Official Website(VadimBogomazov): Click Here
This superior jQuery/javascript plugin is developed by VadimBogomazov. For extra advanced usage, please go to the official website.
