s-carousel v0.0.9

s-carousel

A high-performance seamless scrolling plugin, implemented with requestAnimationFrame and translate .

Installation

npm i s-carousel
# or
pnpm add s-carousel
# or
yarn add s-carousel

Quick Start

The DOM structure of the page needs to be set according to the following conventions

<!-- container -->
<div id="box">
  <!-- list -->
  <ul>
    <!-- items -->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <!-- DOM elements like "dot indicator" or "forward and back arrows" can be added here-->
</div>

Initialize a simple "seamless scroll" instance:

import SCarousel from 's-carousel';

const carousel = new SCarousel({
  el: 'box',
  direction: 'left',
  width: 375,
  height: 175,
  autoPlay: false
});


const startBtn = document.getElementById('start-btn');
startBtn.addEventListener('click', function() {
  carousel.start();
});

Props

Instance Method

start

When non-autoplay, call this method to start playback manually. Can only be called once, only if autoPlay is false and never started.

stop

Stop play.

continue

Resume playback. Used with the stop method.

go

Scroll directly to the position of an index, or scroll one screen in a certain direction. You can use this method to quickly jump or switch back and forth in business scenarios.

• Example: carousel.go(0) or carousel.go('left')
• Argument type: Number or left, right, up, down

resize

Update the width or height of the container.

• Example: carousel.resize(375, 175) // width, height
• Parameter type: Number, unit px

For example, the following code resets the width and height of the container after monitoring the browser window size change.

(function(vm) {
  var resizing,
    resizeTimer,
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

  vm.resizeHandler = function() {
    if (!resizing) {
      resizing = true;
      carousel.stop();
    }
    resizeTimer && clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
      resizing = false;
      carousel.resize(document.body.clientWidth, 300);
      requestAnimationFrame(function() {
        carousel.continue();
      });
    }, 100);
  };
  window.addEventListener('resize', vm.resizeHandler);
})(this); 

Don't forget to clear the listener when leaving the page! The following is an example of clearing the window change listener in the beforeDestroy hook of Vue

beforeDestroy(){
  window.removeEventListener('resize', this.resizeHandler);
}

destroy

Destroy the instance, restoring the element's default style

Here is an example of calling this method in React's componentWillUnmount hook:

componentWillUnmount(){
  this.carousel.destroy()
}

Reference

1. seamless-scroll