Crystal Slider

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

Features

More examples

Installation

Install via NPM:

npm install crystalslider

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"></script>

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:

Name Description Type Default
selector slider selector String or DOM element .crystal-slider
activeSlide active slide index Number 1
loop slider loop Boolean true
autoplay slider autoplay Boolean false
playInterval play interval Number 5000
pauseOnHover pause on hover Boolean false
fade fade mode Boolean false
duration animation duration (in ms) Number 500
draggable slide dragging Boolean true
adaptiveHeight adaptive height Boolean false
threshold touch dragging threshold (in px) Number 30
titles slide titles (values are taken from the data-attributes of slides) Boolean false
keyboard keyboard arrows ← → Boolean false
easing easing function (http://easings.net/en) String ease-out
nav navigation Boolean true
navPrevVal previous button value String Prev
navNextVal next button value String Next
appendNavTo element where the navigation are attached String or DOM element null
pagination pagination Boolean false
thumbnails thumbnails (images are taken from the data-attributes of slides) Boolean false
appendPaginationTo element where the pagination are attached String or DOM element null
zIndex slide z-index (used in fade mode) Number 98
onReady callback after slider initiation Function
beforeChange callback before slide change Function
afterChange callback after slide change Function

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})

Properties

activeSlide active slide index (read only)
slidesLength number of slides (read only)

Extra