jQuery
jquery.scrollTo plugin
jQuery-Touch-Events plugin
(if you want swiping)
Modern browser (not IE 9 or less)
This slider will center the next/previous slide in the viewport, when any slide is wider then 30% of the viewport. Else it will slide 70% of the viewport width. This is configurable.
There are callbacks available before and after the next and previous slide events.
Returning false from a before callback will prevent the slide.
The actual scrolling is handled by the
jquery.scrollTo plugin.
The touch events are made possible by the
jQuery-Touch-Events plugin.
If all slides fit in the viewport, the slides are centered on the screen.
This can easily be changed in the CSS by changing justify-content: center;
on the .slider-track.
Slides have a variable width in the example, but you can easily set a fixed width by setting
flex-basis on the .slide elements, in pixels or a percentage of the viewport.
If there is only one slide and it is wider than the viewport, then the slide will be centered and the arrows will be hidden.
You can set variabled in your SCSS file which makes the slider configuration even easier.
Tinker with the plugin on CodePen
or download it at Github.
Try resizing the window.
You just need to add a lightbox of our choice!
Add the slide-full-width class to the .slider
to make all slides 100% width.
Or add the slide-full-width class to any
.slide to make only that one 100% width.
Notice only the slides content is clickable.
Add the slide-cover-width class to the .slider
to make all slides 100% width.
Or add the slide-cover-width class to any
.slide to make only that one 100% width.
Notice the entire slide is now clickable.
You could now use a background image, or add the slide-cover
class to your image.
This will automatically set it as a background image on the .slide-image
div with background-size: cover.
Use the data-background attribute on the .slide to set a background image.
An optional .slide-overlay wrapper around your content will add a configurable
overlay over the background image to make it darker, lighter, ...
Full width...
Auto width...
