Autoplay
This plugin is used to automatically change the active page after a certain period of time. Optionally displays a progress bar to indicate remaining time.
Examples
Basic example
Customized
Use option Autoplay to pass custom options to the plugin, or set Autoplay:false to disable it. CSS variable --f-progressbar-color can be used to change the color of the progress bar, and --f-progressbar-height for the height.
const options = {
Autoplay: {
pauseOnHover: false,
},
style: {
"--f-progressbar-color": "#111",
"--f-progressbar-height": "2px",
},
};Usage
Include corresponding JS and CSS files:
import { Autoplay } from "@fancyapps/ui/dist/carousel/carousel.autoplay.js";
import "@fancyapps/ui/dist/carousel/carousel.autoplay.css";Pass Autoplay to Carousel constructor or use plugins option.
const container = document.getElementById("myCarousel");
const options = {
// Your custom options
};
Carousel(container, options, { Autoplay }).init();This plugin provides several methods that you can use to manually change state of Autoplay. Example of usage:
// Get reference to the Carousel instance
const myCarousel = Carousel(container, options, { Autoplay }).init();
// Call plugin method
myCarousel.getPlugins().Autoplay?.start();Events
Autoplay adds additional events to the Carousel:
| Name | Description |
|---|---|
| autoplay:start | Autoplay has started |
| autoplay:end | Autoplay has ended |
Options
autoStart
If autoplay should start automatically after Carousel initialization
Type
boolean
Default
true
pauseOnHover
If autoplay should pause when the user hovers over the container
Type
boolean
Default
true
progressbarParentEl
Optional custom element where progress bar is appended
Type
HTMLElement | null | ((instance: CarouselInstance) => HTMLElement | null | undefined)
Default
undefined
showProgressbar
If element should be created to display the autoplay progress
Type
boolean
Default
true
timeout
Delay (in milliseconds) before the slide change
Type
number
Default
2000
Methods
isEnabled
Check if autoplay is enabled
Returns
boolean
pause
Pause autoplay if active
Returns
void
resume
Resume previously paused autoplay
Returns
void
start
Start autoplay
Returns
void
stop
Stop autoplay
Returns
void
toggle
Stops the previously active autoplay or starts a new one
Returns
void