crystalslider v1.1.0

Crystal Slider

Readme languages: English, Русский

Features

• lightweight slider with minimum required functionality written in vanilla JS;
• no dependencies;
• responsive;
• touch device support;
• user-friendly;

Demo

https://vadimbogomazov.github.io/CrystalSlider/

More examples

• Multiple slider instances
• Slider with thumbnails
• Autoplay
• Append navigation/pagination to custom element

Installation

Create HTML markup

Create <div class="crystal-slider"> and <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>

Include plugin files

Include crystalslider.css and crystalslider.min.js:

<link rel="stylesheet" href="css/crystalslider.css">
<script src="js/crystalslider.min.js">

Slider css is divided into styles needed for correct plugin work, and styles of the basic theme (optional).

Call plugin

And the last step — calling plugin by specifying the required selector in options:

<script>
  const crystalSlider = new CrystalSlider({
    selector: 'your-selector' // .crystal-slider – default selector
  });
</script>

Options

The slider plugin has the following options:

API

License

MIT