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

Prop name	Describe	Optional value	Defaults	Required
el	container element. Can be an already obtained DOM object, or an element id	DOMElement or String	-	Yes
direction	direction of scrolling	left, right, up, down	left	No
width	The width of the container, in px	Number	-	Yes
height	The height of the container, in px	Number	-	Yes
delay	The time to stay on each screen, in ms	Number	3000	No
duration	The time it takes to scroll one screen, in ms	Number	300	No
activeIndex	The index of the element displayed by default in the list, starting from 0	Number	0	No
autoPlay	Whether to automatically start playback, if set to false, you can call the instance's start method to start manually later	Boolean	true	No
prevent	Prevent page scrolling, usually used for vertical playback. When set to true, it can avoid the page scrolling up and down caused by the user's swipe gesture in the component	Boolean	true	No
onChange	The callback function when switching between screens, the input parameter is the index of the current screen, which can be used for scenarios such as customizing the small dot indicator	Function	-	No

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