Basic slideshow plugin written in vanilla js.
- Flexible / Responsive
- Handles image loading
- Adds css based on settings
- Loads start slide first (to reduce load time)
- Support for handling custom slide types (e.g. video)
- Add 'fade' transition
HTML:
<div class="slideshow">
<div class="slideshow__slides">
<div class="slideshow__slide">
<img bs-src="original.jpg" />
</div>
</div>
</div>
JS:
var instance = new BareSlideshow(element, optional_settings);
instance.run();
instance.el.onclick = instance.goToNextSlide;
Copied from source code, line 5:
const DEFAULT_SETTINGS = {
selectors: {
slides: ".slideshow__slide",
slidesWrapper: ".slideshow__slides"
},
activeSlideClass: "is-active",
direction: "horizontal",
disableSlideCssTransform: false,
fadeAnimationDuration: 700,
fitImages: true,
hasVariableHeight: false,
loadedFirstClass: "has-loaded-first",
loadingClass: "is-loading",
setImagesAsBackground: false,
slideAnimationDuration: 400,
startInTheMiddle: false,
startSlide: 1,
transition: "slide",
// other options: "fade" -> TODO
transitionSystem: "two-step",
// other options: "all"
versions: NEW_OBJECT_PLACEHOLDER,
versionElementSelector: false
// if: false, then the element given to the constructor is used
// if: "string", then -> this.el.querySelector("string");
};
Removes the previous slide and brings in the new one.
Keeps all the slides in the DOM. Use this if you want show multiple slides next to each other.
Versions can be used to load smaller assets depending on window width.
// usage example
// -> if version_element_width <= version then use_version()
// -> else use_larger_version() || use_standard_src_attribute();
settings = {
versions = {
small: 640,
medium: 1024
}
};
// ... create new instance ...
<div class="slideshow">
<div class="slideshow__slides">
<div class="slideshow__slide">
<img bs-small-src="small.jpg" bs-medium-src="medium.jpg" bs-src="original.jpg" />
</div>
</div>
</div>
A slide can have a type by passing the 'bs-type' attribute to the slide element. When loading the slideshow, the function 'loadSlideWith{{TYPE}}' will be called for each slide. Make sure this function returns a Promise. Check bareSlideshowInstance.loadSlideWithImages
for a reference.