sync-sliders

Vanilla module for creating synced vertical sliders.

See live demo

installation

npm install polvo-labs/sync-sliders --save

usage

Make sure you have included both CSS and JS.

You should provide a markup like this:

<div class="sync-sliders-container | js-sync-sliders">
  <div class="sync-sliders-column">
    <div class="sync-slider">
      <div class="sync-slider-track">
        <div class="sync-slide-item">
          <!-- Place your slide content here -->
        </div>
        <div class="sync-slide-item">
          <!-- Place your slide content here -->
        </div>
        <!-- ... -->
      </div>
    </div>
  </div>
  <div class="sync-sliders-column">
    <div class="sync-slider">
      <div class="sync-slider-track">
        <div class="sync-slide-item">
          <!-- Place your slide content here -->
        </div>
        <div class="sync-slide-item">
          <!-- Place your slide content here -->
        </div>
        <!-- ... -->
      </div>
    </div>
  </div>
</div>

Then, in your JS:

var sliders = new SyncSliders('.js-sync-sliders', options)

options

Name	Type	Description	Default
autoplay	Boolean	Enables autoplay	true
autoplaySpeed	Boolean	Autoplay speed in milliseconds	3000
prevButton	Element or String	Button for "Previous slide"	null
nextButton	Element or String	Button for "Next slide"	null
dotsSelector	Element or String	Element that contains the dots	null
breakpoint	Number	Breakpoint for mobile	768

public api

pause()

Pauses the autoplay.

resume()

Resumes the paused autoplay.

activeIndex

Property with the current slide's active index.

slideTo(index, noTransition)

Go to the slide.

next()

Go to the next slide.

prev()

Go to the previous slide.

events

afterChange

Triggered after the current slide is changed:

sliders.on('afterChange', function (currentIndex, previousIndex) {
  console.log('Now the current index is:', currentIndex)
})

beforeChange

Triggered before the current slide is changed:

sliders.on('beforeChange', function (currentIndex, nextIndex) {
  console.log('The slider has changed the current slide to:', nextIndex)
})

browser support

✔	✔	+IE9 ✔	✔	✔

license

MIT