A slider component for the new millennium.
What it is
Simple! It's a slider component 😀 which can navigate (infinitely!) vertically ("sections") and horizontally ("slides", within a current section) in pure javascript.
What this component provides is a way to handle the basic and essential interactions of the slider itself. This will not provide you with the UI or anything like that; all the fun and responsibility of implementing the UI and interaction around the slider is all up to you!
Features
- Weighing in at a cute
~2kb
(js)450b
(css) - Infinite slides (vertical / horizontal)
- Scroll/Keyboard/Touch friendly
- Super smooth
- Super simple
- Super cute
Coming soon
- Navigation updates URL and history (replaceState)
Getting Started
Include the module via npm i deck3000
or yarn add deck3000
and import it into your project.
;
Very important You must also include the css that comes with the module!
//;
DOM Structure
Deck3000 requires the following structure from your HTML (see below)
- a parent container that includes the selector
js-deck3000
- sections must be a direct descendant of the parent container
- slides must be a direct descendant of a section
Note: if you plan on having elements that are siblings of a slide within a section (for example,some absolute positioned elements within a section) you MUST have a selector on each slide and declare that as a slideSelector
option when instantiating Deck3000, otherwise all direct descendants of a section will be instantiated as a slide.
After Deck3000 successfully instantiated, a is-init
selector will be attached to the parent js-deck3000
element.
Animation speed and easing are all done via CSS in addition to all the essentials of making the component work so don't forget to import the stylesheet!
<!-- First section --> Slide one Slide two Slide three <!-- Second section --> Section two - Slide one Section two - Slide two Section two - Slide three
const Slideshow = slideSelector: '.slide' // (optional) resetSlides: true keyboardEvents: true updateURL: true func onSectionStart func func func ; const onSectionStart = { console; // This logs the state object below };
Callbacks exposes state
currentSectionElem: DOMNode // current section currentSlideElem: DOMNode // currentSlide, section: current: 1 direction: 'next' isAnimating: false next: 2 prev: 0 sectionLength: 3 // This is actually length - 1 slide: currentSlide: 0 next: 1 prev: 2 slideLength: 2 // This is actually length - 1
After Deck3000 instantiates, it will not mutate the structure of the DOM in any way aside from adding classes to sections
and slides
.
URLs
If you have set updateURL
to true
then you may attach a data-title="Whatever"
to a section
. This string will be converted into a slug e.g. Fashion brand
-> fashion-brand
and will be appended to the URL /fashion-brand
when you navigate across sections. If you do set updateURL
to true
but do not attach a data-title attribute, then it will just use the index of the current section e.g. /0
.
API
navigate('type', 'direction') | Navigate through sections/slides.
a.k.a The ✨🥩 of Deck3000
[Deck3000Instance].navigate(['section'/'slide'], ['next'/'prev']);
const nextSlideBtn = document; nextSlideBtn;
disableEvents(bool) | Toggles all (scroll/keyboard/swipe) events.
[Deck3000Instance].disableEvents(bool);
// One might want to disable scroll events // (for ultimate peace of mind) // during certain UI states of your site/application const toggleOverlay = { if bool overlayclassList; Slideshow; return; overlayclassList; };
Emitter
Deck3000 uses mitt
for handling events. The Emitter is exposed so you can subscribe to navigate
(section) and navigateSlide
(slide) events if you wish.
Deck3000InstanceEmitter; Deck3000InstanceEmitter;
Thanks
- Built with Microbundle It's awesome 💃
- Also built with Parcel 🕺