Magic Roundabout
A tiny JavaScript carousel
Install
npm install magic-roundabout
Usage
First, create the HTML structure for your slider.
<!-- First slide content --> <!-- Second slide content -->
Then, create a new instance of magic roundabout.
const magicRoundabout = '#slideshow'
Magic Roundabout does not include any CSS, making it easy to style as you see fit. The following should be enough to get you started
If you want to add navigation buttons, just add them into the main .slideshow
element.
<!-- First slide content --> <!-- Second slide content --> Previous Next
Options
Magic Roundabout's full option list is shown below:
const magicRoundabout = '#your-element' // Whether the slider should autoplay auto: false // Whether next/previous buttons are in the container buttons: true // If true, slides will be centered in the container // (Disabled if `limit` option is `true`) center: false // If true, clicking a slide will transition to it click: true // When auto == true, the time between transitions delay: 10000 // If true, the user can click-and-drag or swipe-and-drag the slideshow draggable: false // If true, the arrow keys will control the slider while it is in the viewport keys: true // If true, the slider will not be allowed to scroll past the last slide's right edge // (Disabled if `loop` option is `true`) limit: true // Whether the slider should return to the start when at the end loop: true // A function which is fired when the current slide changes {} // If true, the carousel will respond to swipe events touch: true // If true, the carousel will respond to scroll events scroll: true // If true, the carousel will transition vertically vertical: false