philip21.js

@philip21/slider

• slider module (like swiper.js)
• use only css on animation (not using js computing resources)
• small output size

Installation

npm install @philip21/slider --save

Getting Started (Demo)

<div id="slider">
  <ul class="camera">
    <li class="panel">1</li>
    <li class="panel">2</li>
    <li class="panel">3</li>
  </ul>
</div>

.slider {
  overflow: hidden;
}
.camera {
  white-space: nowrap;
  font-size: 0;
}
.panel {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  vertical-align: top;
}

import Slider from '@philip21/slider'

const element = document.getElementById('slider');
const slider = new Slider(element).on({
  'changed': (e) => {
    console.log(e);
  },
});

setTimeout(() => {
  // no animation
  slider.moveTo(2);
  // with animation
  slider.moveTo(2, { duration: 2000, timingFunction: 'ease' });
}, 1000);