Multi-Layout Slideshow

A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js.

MultiLayoutSlideshow_800x600

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.

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.

MultiLayoutSlideshow_00

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 : { /* ... */ },
		/* ... */
	}
};

MultiLayoutSlideshow_01

We hope you enjoy this little slideshow component and find it useful.

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version 11
  • SafariSupported from version 9
  • OperaSupported

Please note that the last layout will not work in IE because the clip-path property is not supported.

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 16

  1. 1

    Thanks a lot for the great article and demo. One thing I noticed, though, is that the rhomboid clip path for the slides is actually not working in Firefox (Dev Ed. 50.0, that is) and I have yet to find a way to fix that.

    • 2

      Follow-up: Forget what I wrote about the path not working in Firefox. It does work, but only locally – not in the online demo.

    • 3

      Thanks a lot for pointing that out, Nils! We’ve fixed it for the online version. Cheers, ML

  2. 5

    I must say this website is an absolute goldmine of ideas and and useful code. Credit to the people that run it.

  3. 8

    wow its awasome, i trying to make this slideshow autoplay, but always fails. how to make it autoplay? thankyou

    best regard,

  4. 14

    hello Mary Lou I am ahmet from Turkey thank you your desing
    if you allow me i’ll use your desing and you inspire me

Follow this discussion

Leave a Comment