Autoscroll
This plugin is used to create a "marguee" effect.
Examples
Basic example
Customized
The speedOnHover option can be used to change the speed, direction or completely stop Autoscroll when hovering over the mouse cursor.
Usage
Include corresponding JS file:
import { Autoscroll } from "@fancyapps/ui/dist/carousel/carousel.autoscroll.js";Pass Autoscroll to Carousel constructor or use plugins option.
const container = document.getElementById("myCarousel");
const options = {
// Your custom options
};
Carousel(container, options, { Autoscroll }).init();This plugin provides several methods that you can use to manually change state of Autoscroll. Example of usage:
// Get reference to the Carousel instance
const myCarousel = Carousel(container, options, { Autoscroll }).init();
// Call plugin method
myCarousel.getPlugins().Autoscroll?.start();Events
Autoscroll adds additional events to the Carousel:
| Name | Description |
|---|---|
| autoscroll:start | Autoplay has started |
| autoscroll:end | Autoplay has ended |
Options
autoStart
If Autoscroll should start automatically after Carousel initialization
Type
boolean
Default
true
speed
Animation speed
Type
number
Default
3
speedOnHover
Optional animation speed when user interacts with an element with a pointing device
Type
number
Default
undefined
Methods
isEnabled
Check if autoscroll is enabled
Returns
boolean
pause
Pause autoscroll if active
Returns
void
resume
Resume previously paused autoscroll
Returns
void
start
Start autoscroll
Returns
void
stop
Stop autoscroll
Returns
void
toggle
Stops the previously active autoscroll or starts a new one
Returns
void