- A gallery and carousel slider implementation based on swiffyslider
- Examples based on sliders used in the JMP rebuild project
- Uses swiffyslider built-in styling based on classes with some overrides
- Uses data attributes for JavaScript configuration
- A vertial thumbnail list on the left
- Price box on the right
- Details below the gallery
- A fullscreen and zoom-in option with key commands (Alt-Z and Alt-F)
- The fullscreen option uses the OS fullscreen view if allowed
- The zoom-in option uses a 2d canvas element for GPU performance
- Uses mouse events and touch events for pan and zoom
- Keyboard navigation with arrow keys, home, end and page up/down keys
- Uses modern CSS and lightweight JavaScript
- Thumbnails and slider navigation synchronized
- Slider navigation animation
Link: gallery.html
- Horizontal slider with 2 slides on mobile, 4 on tablet and 6 on desktop
- Fullscreen option and keyboard navigation optional
- With product details such as title, price and cta
- Uses lightweight JavaScript observers to enable/disable slider navigation based on number of slides and visible slides
- Slider navigation and product links animation
Link: carousel.html
- Horizontal slider with 6 slides on mobile, tablet and desktop (css override)
- Uses lightweight JavaScript observers to enable/disable slider navigation based on number of slides and visible slides
- Slider navigation and product links animation
Link: color-variants.html
CSS
- Less to css compile with
npm run build-css - Live reload with
npm run watch-css - Uses
less-watch-compiler
JavaScript
- JavaScript compile with
npm run build-js - Live reload with
npm run watch-js - Uses
esbuild
- Zoom funtion (canvas svg) is not always initialised properly
- Fullscreen view immediately switches back to normal in Chrome
- When returning from fullscreen the gallery slider image is not sized properly