View demo Download source
Today we'd like to share a simple decorative slideshow component with you. The idea behind this slideshow is to have an individual layout for each slide, accompanied by a distinct effect. The images of each slide is meant to have a decorative purpose which could be suitable for an article header; or, for example, an ornamental quotes slideshow within an article.
Attention: Note that we are using some modern CSS properties like relative viewport units and 3D transforms which won't work in old browsers.
The animations for this slideshow are powered by anime.js by Julian Garnier. The images we use in the demos are from Unsplash.com, a great resource for free high-quality images.
The slideshow structure looks as follows:
<div class="slideshow">
<div class="slide slide--layout-1" data-layout="layout1">
<div class="slide-imgwrap">
<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/1.jpg);"></div></div>
<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/2.jpg);"></div></div>
<div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/3.jpg);"></div></div>
</div>
<div class="slide__title">
<h3 class="slide__title-main">Now or Never</h3>
<p class="slide__title-sub">Our battered suitcases were piled on the sidewalk again; we had longer ways to go. But no matter, the road is life. <a href="#">Read more</a></p>
</div>
</div><!-- /slide -->
<div class="slide slide--layout-2" data-layout="layout2">
<!-- ... -->
</div>
<!-- ... -->
</div><!-- /slideshow -->
Each slide has the respective layout class and also a data-layout attribute that will help us define individual animations for each slide.
[adrotate group="2"]
An example for the styles of a layout is the following:
/* Layout 1: 3 grid images */
.slide--layout-1 .slide__img {
position: absolute;
width: calc(50% - 1em);
}
.slide--layout-1 .slide__img:first-child {
left: 0.5em;
height: 100%;
}
.slide--layout-1 .slide__img:nth-child(n+2) {
left: calc(50% + 0.5em);
height: calc(50% - 0.5em);
}
.slide--layout-1 .slide__img:nth-child(3) {
top: calc(50% + 0.5em);
}
This layout can be achieved in many different ways; keep in mind that this is merely an example.
The animations for each layout are defined in our layout configuration. The structure is [layout name] : { out : {navigating out properties}, in : {navigating in properties} }. We can set different animations for the incoming slide and the disappearing one, where we can distinguish between whether the slide is the next or previous one. We use anime.js for the animations and you can find out more about the structure and how to use it in the GitHub repo.
The following is an example (first layout in the demo):
MLSlideshow.prototype.options = {
// Starting position.
startIdx : 0,
// Layout configuration.
// [layout name] : { out : {navigating out properties}, in : {navigating in properties} }
// For some properties we can have a "next" and "prev" behavior which can be different for the two - navigating out/in to the right or left.
// For the translationX/Y we can use percentage values (relative to the Slideshow).
layoutConfig : {
layout1 : {
out : {
translateX : {
next: '-100%',
prev: '100%'
},
rotateZ : {
next: function(el, index) {
return anime.random(-15, 0);
},
prev: function(el, index) {
return anime.random(0, 15);
}
},
opacity : 0,
duration: 1200,
easing : 'easeOutQuint',
itemsDelay : 80
},
in : {
resetProps : {
translateX : {
next: '100%',
prev: '-100%'
},
rotateZ : {
next: function(el, index) {
return anime.random(0, 15);
},
prev: function(el, index) {
return anime.random(-15, 0);
}
},
opacity : 0,
},
translateX : '0%',
rotateZ : 0,
opacity : 1,
duration: 700,
easing : 'easeOutQuint',
itemsDelay : 80
}
},
layout2 : { /* ... */ },
layout3 : { /* ... */ },
/* ... */
}
};
We hope you enjoy this little slideshow component and find it useful.
[browsersupport chrome="all" safari="9" opera="all" firefox="all" ie="11"]
View demo Download source