- None
- Changed the use of
zoom
in css totransform: scale()
- Changed javascript to use
"
instead'
consistently - Changed all event listeners to be passive to increase performance even further
- Support for mouse drag option using the new swiffy-slider-extensions object
- Added swiffy-slider-extensions for adding features not needed for core releases. Can be accessed on
swiffyslider.extensions.*
- Configure animation threshold for the intersection observer that sets
.slide-visible
when sliding. New attributedata-slider-nav-animation-threshold
swiffyslider.setVisibleSlides
can now be called with a threshold overwriting the default 0.3
- Configurator did not start autuplay when enabled
- Navigation in docs fixed
- Slide animation
- Javascript can now set visible-slide class using intersection observer
- Different animation styles in css
- BREAKING slider-item-shadow has been removed since it uses ::after which disables touch sliding on mobile devices
- Fix z-index issue with nav and indicators (#1)
Welcome to the first release of Swiffy Slider.
This project utilizes what is available in modern browsers resulting in a super lightweight and fast slider, greatly reducing the javascript footprint and increase performance to meet todays standards.
Slide any content made in markup
- Navigate with Touch, Keyboard, trackpad, pen and Mouse - because it is just browser scrolling
- Setup is done in pure markup and css classes, no scripting required
- No js loading of slides, configuration or initialization
- Vanilla javascript, less than 1.3kb ~110 lines
- Very low overall footprint ~4.5kb in total (css+js gzip'ed)
Swiffy Slider benefits
- Mobile first 📱, responsive, scaleable and content resilient sliding. Ensuring painless mobile experience.
- Lighthouse 100 points 💯 Using native browser features a unrivaled performance is ensured
- SEO 📝 is great as the slides and their content is in pure SLURP-readable markup
- Build designed pages 🎨 any kind of markup can be slided giving perfect design freedom
- Web Accessibility Guidelines (WCAG) 🏆 make your website as accessible as needed since this is just markup
Thank you, give it a spin!