Tilted Content Slideshow

A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.

The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations. The slideshow won’t be the same as the one on the FWA page: the items won’t be “floating” or moving on hover and we’ll only have a simple navigation.

If you have seen the effect over at the FWA landing page you will notice that the movement directions of the screenshots are random (moving up or down and sliding to the sides). We want to achieve the same effect by randomly adding some data-attributes that control the type of animation.

Please note that we’ll be using CSS 3D Transforms and CSS Animations which might not work in older or mobile browsers.

For the demo we are using some website screenshots from Zurb’s Responsive Gallery.

So, let’s get started!

The Markup

The slideshow has a main container with the class and ID “slideshow” and we can use an ordered list for our slides. Each list item contains a description with a title and a paragraph. It will also contain a division with the class “tiltview” where we will add our screenshots. The classes “col” an “row” will help us set the right layout for the inner anchors:

<div class="slideshow" id="slideshow">
	<ol class="slides">
		<li class="current">
			<div class="description">
				<h2>Some Title</h2>
				<p>Some description</p>
			</div>
			<div class="tiltview col">
				<a href="http://grovemade.com/"><img src="img/1_screen.jpg"/></a>
				<a href="https://tsovet.com/"><img src="img/2_screen.jpg"/></a>
			</div>
		</li>
		<li>
			<div class="description">
				<!-- ... -->
			</div>
			<div class="tiltview row">
				<!-- ... -->
			</div>
		</li>
		<li>
			<!-- ... -->
		</li>
	</ol>
</div>

We’ll also add a navigation element in our JavaScript which we’ll place right after the ordered list. It will consist of a nav with the right amount of spans.

Let’s already have a thought on how we will control the animations for each screenshot. In our script we set a data-attribute for a random incoming and outgoing animation. We’ll use the data-attributes data-effect-in and data-effect-out to control our animations in the CSS. We’ll check out the values for those attributes in a while. Let’s first check out the main style of the slideshow.

The CSS

Note that the CSS will not contain any vendor prefixes, but you will find them in the files (-webkit-).

Our slideshow wrapper and the ordered list will have the following style:

.slideshow {
	position: relative;
	margin-bottom: 100px;
}

.slides {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	height: 500px;
	width: 100%;
	overflow: hidden;
	background: #ddd;
	color: #333;
}

The slideshow will be 500px high and we need to set the overflow to hidden, so that we don’t see the items fly out.
When we can’t build our slideshow because JavaScript is not enabled, we need to make sure that all slides are shown, so we set the height to auto:

.no-js .slides {
	height: auto;
}

Each list item will be positioned absolutely and occupy all available width and height. By default, we’ll set the visibility to hidden.
Each slide will also serve as the perspective container and we’ll define a perspective value of 1600px:

.slides > li {
	width: 100%;
	height: 100%;
	position: absolute;
	visibility: hidden;
	perspective: 1600px;
}

Let’s not forget the fallback:

.no-js .slides > li {
	position: relative;
	visibility: visible;
}

The navigation which is added dynamically, will appear as a set of lines. Each navigation item is a span and although we are using a tiny line, we want to make sure that the clickable area is actually bigger. This we can simulate by adding a white border:

.slideshow > nav {
	text-align: center;
	margin-top: 20px;
}

.slideshow > nav span {
	display: inline-block;
	width: 60px;
	height: 25px;
	border-top: 10px solid #fff;
	border-bottom: 10px solid #fff;
	background-color: #ddd;
	cursor: pointer;
	margin: 0 3px;
	transition: background-color 0.2s;
}

.slideshow > nav span:hover {
	background-color: #333;
}

.slideshow > nav span.current {
	background-color: #aaa;
}

The description will fill half of the width and since we want a transition on the opacity, we need to set it to 0 initially:

.description {
	width: 50%;
	padding: 2em 4em;
	font-size: 1.5em;
	position: relative;
	z-index: 1000;
	opacity: 0;
}

.no-js .description {
	opacity: 1;
}

.description h2 {
	font-size: 200%;
}

Now, let’s style the most crucial element in our slideshow. The division with the class “tiltview” will help us put our items into perspective. We need to add preserve-3d as transform style because some inner items will need to move on the Z-axis in some animations.
The “tiltview” wrapper will be centered by setting the top to 50% and transforming it -50% on the Y-axis. We’ll also rotate it on the X and Z-axis to create the 3D look:

.tiltview {
	position: absolute;
	left: 50%;
	width: 50%;
	top: 50%;
	transform-style: preserve-3d;
	transform: translateY(-50%) rotateX(60deg) rotateZ(35deg);
}

And the anchors and images will have the following style (the outline helps to avoid jagged edges in Firefox):

.tiltview a {
	outline: 1px solid transparent;
}

.tiltview a,
.tiltview a img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.tiltview a:first-child {
	margin-bottom: 30px;
}

For the row and column cases we’ll set the widths accordingly:

.tiltview.row a {
	width: 48%;
	width: calc(50% - 15px);
	margin: 0;
}

.tiltview.row a:nth-child(2) {
	left: 50%;
	left: calc(50% + 15px);
	position: absolute;
	top: 0;
}

In our script we will use the classes “show” and “hide” to control the visibility of the slides:

/* Show/Hide */
.slides > li.current,
.slides > li.show {
	visibility: visible;
}

The description will fade in and out:

.description {
	transition: opacity 0.75s;
}

.current .description,
.show .description {
	opacity: 1;
}

.hide .description {
	opacity: 0;
}

As we mentioned before, we’ll control the animations by using some data-attributes. We have to define two types of animations: the incoming one (when we show the next slide) and the outgoing one (when we hide the previous slide).
We want to be able to animate the items in all possible directions, so we’ll need six different types: move up, move down, slide up, slide down, slide left, slide right. This makes a total of 12 animations (incoming and outgoing).

So, let’s define the first one for moving the outgoing element up:

/***********************/
/* Move up */
/***********************/

.hide[data-effect-out="moveUpOut"] .tiltview a {
	animation: moveUpOut 1.5s both;
}

.hide[data-effect-out="moveUpOut"] .tiltview a:nth-child(2) {
	animation-delay: 0.25s;
}

@keyframes moveUpOut {
	25% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateZ(-30px);
	}
	100% {
		transform: translateZ(3000px);
	}
}

We define a slight animation delay for the second item and we use a custom cubic-bezier timing function to add some interesting momentum.

The second animation for this movement is the incoming one which has the initial and end step reversed:

.show[data-effect-in="moveUpIn"] .tiltview a {
	animation: moveUpIn 1.5s 0.5s both;
}

.show[data-effect-in="moveUpIn"] .tiltview a:nth-child(2) {
	animation-delay: 0.75s;
}

@keyframes moveUpIn {
	0% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateZ(-3000px);
	}
	75% {
		transform: translateZ(30px);
	}
	100% {
		transform: translateZ(0);
	}
}

As you might have noticed, we could simplify the animation delay for the “hide” and the “show” case, but keeping the two rules separated will allow for easier adaption in case you’d like to define some different delays.

The resting animations are as follows:

/***********************/
/* Move down */
/***********************/
.hide[data-effect-out="moveDownOut"] .tiltview a {
	animation: moveDownOut 1.5s both;
}

.hide[data-effect-out="moveDownOut"] .tiltview a:nth-child(2) {
	animation-delay: 0.25s;
}

@keyframes moveDownOut {
	25% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateZ(30px);
	}
	100% {
		transform: translateZ(-3000px);
	}
}

.show[data-effect-in="moveDownIn"] .tiltview a {
	animation: moveDownIn 1.5s 0.5s both;
}

.show[data-effect-in="moveDownIn"] .tiltview a:nth-child(2) {
	animation-delay: 0.75s;
}

@keyframes moveDownIn {
	0% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateZ(3000px);
	}
	75% {
		transform: translateZ(-30px);
	}
	100% {
		transform: translateZ(0);
	}
}

/***********************/
/* Slide up */
/***********************/
.hide[data-effect-out="slideUpOut"] .tiltview a {
	animation: slideUpOut 1.5s both;
}

.hide[data-effect-out="slideUpOut"] .tiltview a:nth-child(2) {
	animation-delay: 0.25s;
}

@keyframes slideUpOut {
	25% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateY(30px);
	}
	100% {
		transform: translateY(-3000px);
	}
}

.show[data-effect-in="slideUpIn"] .tiltview a {
	animation: slideUpIn 1.5s 0.5s both;
}

.show[data-effect-in="slideUpIn"] .tiltview a:nth-child(2) {
	animation-delay: 0.75s;
}

@keyframes slideUpIn {
	0% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateY(3000px);
	}
	75% {
		transform: translateY(-30px);
	}
	100% {
		transform: translateY(0);
	}
}

/***********************/
/* Slide down */
/***********************/
.hide[data-effect-out="slideDownOut"] .tiltview a {
	animation: slideDownOut 1.5s both;
}

.hide[data-effect-out="slideDownOut"] .tiltview.row a:nth-child(2),
.hide[data-effect-out="slideDownOut"] .tiltview.col a:first-child {
	animation-delay: 0.25s;
}

@keyframes slideDownOut {
	25% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateY(-30px);
	}
	100% {
		transform: translateY(3000px);
	}
}

.show[data-effect-in="slideDownIn"] .tiltview a {
	animation: slideDownIn 1.5s 0.5s both;
}

.show[data-effect-in="slideDownIn"] .tiltview.row a:nth-child(2),
.show[data-effect-in="slideDownIn"] .tiltview.col a:first-child {
	animation-delay: 0.75s;
}

@keyframes slideDownIn {
	0% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateY(-3000px);
	}
	75% {
		transform: translateY(30px);
	}
	100% {
		transform: translateY(0);
	}
}

/***********************/
/* Slide left */
/***********************/
.hide[data-effect-out="slideLeftOut"] .tiltview a {
	animation: slideLeftOut 1.5s both;
}

.hide[data-effect-out="slideLeftOut"] .tiltview a:nth-child(2) {
	animation-delay: 0.25s;
}

@keyframes slideLeftOut {
	25% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateX(30px);
	}
	100% {
		transform: translateX(-5000px);
	}
}

.show[data-effect-in="slideLeftIn"] .tiltview a {
	animation: slideLeftIn 1.5s 0.5s both;
}

.show[data-effect-in="slideLeftIn"] .tiltview a:nth-child(2) {
	animation-delay: 0.75s;
}

@keyframes slideLeftIn {
	0% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateX(3000px);
	}
	75% {
		transform: translateX(-30px);
	}
	100% {
		transform: translateX(0);
	}
}

/***********************/
/* Slide right */
/***********************/
.hide[data-effect-out="slideRightOut"] .tiltview a {
	animation: slideRightOut 1.5s both;
}

.hide[data-effect-out="slideRightOut"] .tiltview.col a:nth-child(2),
.hide[data-effect-out="slideRightOut"] .tiltview.row a:first-child {
	animation-delay: 0.25s;
}

@keyframes slideRightOut {
	25% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateX(-30px);
	}
	100% {
		transform: translateX(3000px);
	}
}

.show[data-effect-in="slideRightIn"] .tiltview a {
	animation: slideRightIn 1.5s 0.5s both;
}

.show[data-effect-in="slideRightIn"] .tiltview.col a:nth-child(2),
.show[data-effect-in="slideRightIn"] .tiltview.row a:first-child {
	animation-delay: 0.75s;
}

@keyframes slideRightIn {
	0% {
		animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
		transform: translateX(-5000px);
	}
	75% {
		transform: translateX(30px);
	}
	100% {
		transform: translateX(0);
	}
}

Note that for some animations we need to define the animation delay for the first child instead of the second. We need to do this so that the anchors don’t overlap each other for some directions.

When we don’t have support for CSS 3D Transforms or transform-style: preserve-3d, then we want to provide a simple fallback:

/* Fallback for no 3D Transforms and no preserve-3d */
.no-csstransformspreserve3d .show .tiltview a,
.no-csstransformspreserve3d .hide .tiltview a,
.no-csstransforms3d .show .tiltview a,
.no-csstransforms3d .hide .tiltview a {
	animation: none !important;
}

.no-csstransforms3d .tiltview.col {
	top: -50%;
}

.no-csstransforms3d .tiltview.row {
	top: 20px;
}

And last, but not least, we need to make sure that we have a reasonable look for smaller screens. In this case we want the anchors with their screenshots to be just decoration, so we’ll set their opacity lower and make them be not clickable:

@media screen and (max-width: 65.3125em) {
	.description,
	.tiltview {
		width: 100%;
	}

	.tiltview {
		left: 0;
		opacity: 0.3;
		pointer-events: none;
	}
}

@media screen and (max-width: 33.75em) {
	.description {
		font-size: 1.1em;
	}

	.slideshow > nav span {
		width: 20px;
		height: 40px;
		margin: 0 10px;
	}
}

@media screen and (max-width: 24em) {
	.slides {
		height: 320px;
	}

	.description {
		font-size: 1em;
		padding: 1.4em;
	}

	.no-csstransforms3d .tiltview.col,
	.no-csstransforms3d .tiltview.row {
		top: 0;
	}
}

And that’s the style! Let’s do our slideshow script.

The JavaScript

We will start by initializing some variables, like the two arrays with the animation class names that control the incoming and outgoing of our items. These will be picked randomly and set to the items when we navigate the slideshow. Other variables are the items, the current value of the selected item (we assume this will be the first one) and the total number of items inside the slider:

function TiltSlider( el, options ) {
	this.el = el;
	// available effects for the animations (animation class names) - when an item comes in or goes out
	this.animEffectsOut = ['moveUpOut','moveDownOut','slideUpOut','slideDownOut','slideLeftOut','slideRightOut'];
	this.animEffectsIn = ['moveUpIn','moveDownIn','slideUpIn','slideDownIn','slideLeftIn','slideRightIn'];
	// the items
	this.items = this.el.querySelector( 'ol.slides' ).children;
	// total number of items
	this.itemsCount = this.items.length;
	if( !this.itemsCount ) return;
	// index of the current item
	this.current = 0;
	this.options = extend( {}, this.options );
	extend( this.options, options );
	this._init();
}

In order to navigate the slideshow we will add some navigation spans that, when clicked, will make the respective slideshow item appear. The total number of spans will be the same as the total number of items. Let’s add the navigation to our component:

TiltSlider.prototype._addNavigation = function() {
	// add nav "dots"
	this.nav = document.createElement( 'nav' )
	var inner = '';
	for( var i = 0; i < this.itemsCount; ++i ) {
		inner += i === 0 ? '' : '';
	}
	this.nav.innerHTML = inner;
	this.el.appendChild( this.nav );
	this.navDots = [].slice.call( this.nav.children );
}

Next, we need to bind the onclick event to the navigation spans. If we click on any other but the current span, then the current item should animate out and the new one should animate in.

TiltSlider.prototype._initEvents = function() {
	var self = this;
	// show a new item when clicking the navigation "dots"
	this.navDots.forEach( function( dot, idx ) {
		dot.addEventListener( 'click', function() {
			if( idx !== self.current ) {
				self._showItem( idx );
			}
		} );
	} );
}

We need to reference and work with the current item and also the next one that has to appear. We will add and remove classes from both of them in order to apply the respective animations. The animation (i.e. the data-attribute value) itself will be randomly picked from our animEffectsOut and animEffectsIn arrays as described before.

TiltSlider.prototype._showItem = function( pos ) {
	if( this.isAnimating ) {
		return false;
	}
	this.isAnimating = true;

	classie.removeClass( this.navDots[ this.current ], 'current' );

	var self = this,
		// the current item
		currentItem = this.items[ this.current ];

	this.current = pos;

	// next item to come in
	var nextItem = this.items[ this.current ],
		// set random effects for the items
		outEffect = this.animEffectsOut[ Math.floor( Math.random() * this.animEffectsOut.length ) ],
		inEffect = this.animEffectsIn[ Math.floor( Math.random() * this.animEffectsOut.length ) ];

	currentItem.setAttribute( 'data-effect-out', outEffect );
	nextItem.setAttribute( 'data-effect-in', inEffect );

	classie.addClass( this.navDots[ this.current ], 'current' );

	var cntAnims = 0,
		// the number of elements that actually animate inside the current item
		animElemsCurrentCount = currentItem.querySelector( '.tiltview' ).children.length, 
		// the number of elements that actually animate inside the next item
		animElemsNextCount = nextItem.querySelector( '.tiltview' ).children.length,
		// keep track of the number of animations that are terminated
		animEndCurrentCnt = 0, animEndNextCnt = 0,
		// check function for the end of each animation
		isFinished = function() {
			++cntAnims;
			if( cntAnims === 2 ) {
				self.isAnimating = false;
			}
		},
		// function for the end of the current item animation
		onEndAnimationCurrentItem = function() {
			++animEndCurrentCnt;
			var endFn = function() {
				classie.removeClass( currentItem, 'hide' );
				classie.removeClass( currentItem, 'current' );
				isFinished();
			};

			if( !isSupported ) {
				endFn();
			}
			else if( animEndCurrentCnt === animElemsCurrentCount ) {
				currentItem.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
				endFn();
			}
		},
		// function for the end of the next item animation
		onEndAnimationNextItem = function() {
			++animEndNextCnt;
			var endFn = function() {
				classie.removeClass( nextItem, 'show' );
				classie.addClass( nextItem, 'current' );
				isFinished();
			};

			if( !isSupported ) {
				endFn();
			}
			else if( animEndNextCnt === animElemsNextCount ) {
				nextItem.removeEventListener( animEndEventName, onEndAnimationNextItem );
				endFn();
			}
		};

	if( isSupported ) {
		currentItem.addEventListener( animEndEventName, onEndAnimationCurrentItem );
		nextItem.addEventListener( animEndEventName, onEndAnimationNextItem );
	}
	else {
		onEndAnimationCurrentItem();
		onEndAnimationNextItem();
	}

	classie.addClass( currentItem, 'hide' );
	classie.addClass( nextItem, 'show' );
}

And that’s it! We hope you enjoyed this tutorial and find it useful!

Note that IE11 still does not support transform-style: preserve-3d, so the fallback will be shown there.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 123

Comments are closed.
  1. 1st to comment 😛
    good one, as always. but i think the images are a little edgy. not smooth.

    • Mary…. I’m so sorry for making mistake with your name =( If possible, please remove my both comments

  2. Just a heads up to Chrome users who may have a problem with the demo not working. Make sure you don’t have “Enable Experimental Platform Features” flag enabled.

  3. I love this… A marriage of elegance and functionality. This looks great and very practical. Great work, Lucy!

  4. That is a really beautiful work you got there. Thumbs up. Please is there a way to make the slider play automatically?

  5. Thank you! I love all the tutorials and freebies you share with us. Really, you are awesome.

  6. coding fantastic!
    a question, how to change the js for each nav item (span) contains the title of his description?

  7. Lovely piece of work Mary. I would also like to know if it is possible for the slider to play automatically.
    Thanks 🙂

  8. very nice work .. thank you..but is there a way to make the slider play automatically?

  9. Wow this great!
    how change the js add nav item to ul > li ? I want to put image / text inside and that he was added in html

  10. MARY LOU, that’s an awesome effect! I’gonna use it for a next project! Thanks a lot!

  11. Hello Mary…..thank you!

    Your work is so inspiring.

    Is is possible to make sliders like the one on sap.com or infosys.com.

  12. Great tutorial and Effect.I have some advice to anyone who will try to implement this on zurb’s foundation framework,You will have to change the .hide class to something else since foundation has a native hide class that will conflict with this one or else you will spend a whole day wondering what is screwing it up!…Like I did 🙂

    • Hey Ryan, a million thanks for sharing this, I was in the process of hunting down the conflict with the Foundation Framework.

      *internet high five*

  13. Great effect, i think it would be nice an autoplay and [prev & next] buttons, does anybody knows how to achieve this?

  14. I’ve done this rudimentary solution to add an autoplay for this awesome slideshow

    That js library is needed to make the snippet work

    http://www.lacabanyaibiza.com/sys/mt-static/js/wait.js

    <script type="text/javascript"> $(document).ready(function(){ var el=1; repeat(7000,function(){ if(el==7){ $('#slideshow nav span:nth-child(1)').click(); el=2; } else{ $('#slideshow nav span:nth-child('+el+')').click(); el=el+1; } }); }); </script>

    you can see it working at primeteamdesign.com

    • Muy bueno tu aporte Daniel para este fantástico slide de contenido. Estaba buscando como introducir un autoplay y tú lo has solucionado.

      Muchas gracias a ti y a Mary Lou por su gran trabajo.

      Saludos amigos.

    • Hola de nuevo Daniel.

      Oye una pregunta, puede que el script y la biblioteca js de wait tenga algún error, es que no funciona y el enlace que dejaste para verlo funcionando está en standby.

      Un saludo y muchas gracias.

    • Al final lo tengo funcionando, era yo el que estaba cometiendo un error, pero podrías ayudarme a explicarme el script que contiene el repeat? Entiendo que 7000 son las veces que lo vas a repetir, lo que no entiendo es el tema de la variable el y sus valores, a qué hacen referencia. A mí me gustaría que todos permanecieran el mismo tiempo en pantalla, pero no sucede esto, parece que el tiempo del primero se suma al segundo, y el de los dos primeros se suma al tercero. Como puedo decirle que cada uno esté, por ejemplo, 3 segundos o 3000 milisegundos y que luego cambie al siguiente y así sucesivamente.

      Un saludo.

    • Hey Daniel,

      Could you please help me out…

      I’ve included “wait.js” and your code in head section of my html…. but autoplay still not working 🙁

      if you can help me it would be really great.

    • Hey Daneil,

      Could you please help me out….I’ve put “wait.js” and your code in the body section of my html but autoplay still not working 🙁

      if you can help me it would be really great.

      Thanks in advance

  15. Wow this great!
    Big Thank you Mary.
    Daniel Dorado many thanks for the solution!

  16. Hi,
    if someone can help me it would be great. I can’t make that my slideshow changes slides automatically..
    I’ve put this code in my html file ()

    $(document).ready(function(){
    var el=1;
    repeat(7000,function(){
    if(el==7){
    $(‘#slideshow nav span:nth-child(1)’).click();
    el=2;
    }
    else{
    $(‘#slideshow nav span:nth-child(‘+el+’)’).click();
    el=el+1;
    }
    });
    });

    What am I doing wrong??

  17. I”m trying to get the slide to go on auto. I put the following code in the body of my html:

    $(document).ready(function(){
    var el=1;
    repeat(7000,function(){
    if(el==7){
    $(‘#slideshow nav span:nth-child(1)’).click();
    el=2;
    }
    else{
    $(‘#slideshow nav span:nth-child(‘+el+’)’).click();
    el=el+1;
    }
    });
    });

    And I copied the code from http://www.lacabanyaibiza.com/sys/mt-static/js/wait.js and created the “wait.js” file tried it in both the body and head sections of my html. I don’t know what else to do. Can someone help please?

  18. Again, I wanted to try something very creative by replacing the “.jpg” images with “.gif” motion images. I did this but my motion images are motionless. Does anyone know how to go around this?

  19. I finally found a way out and I thought I should drop it here. This will work offline as well.

    After you input the following code in the “body” section of your html:

    $(document).ready(function(){
    var el=1;
    repeat(7000,function(){
    if(el==7){
    $(‘#slideshow nav span:nth-child(1)’).click();
    el=2;
    }
    else{
    $(‘#slideshow nav span:nth-child(‘+el+’)’).click();
    el=el+1;
    }
    });
    });

    Input the “wait.js” also in the body, like this:

    Now, here’s the tricky part. If you do only the above, like me, you might still get errors but now input another line as below (I have used arrows, on the left and right hand sides to indicate the new/alien code):

    new TiltSlider( document.getElementById( ‘slideshow’ ) );

    ==> <==

    $(document).ready(function(){
    var el=1;
    repeat(7000,function(){
    if(el==7){
    $(‘#slideshow nav span:nth-child(1)’).click();
    el=2;
    }
    else{
    $(‘#slideshow nav span:nth-child(‘+el+’)’).click();
    el=el+1;
    }
    });
    });

    Please note that where you place the code is very vital to getting the result you desire. You can play around with it. But this is what worked for me.

    Mail me at taiwoolabowale@gmail.com if you have any questions that I might be able to help with concerning this.

  20. i have added wait.js and your code

    new TiltSlider( document.getElementById(‘slideshow’));
    $(document).ready(function(){
    var el=1;
    repeat(7000,function(){
    if(el==7){
    $(‘#slideshow nav span:nth-child(1)’).click();
    el=2;
    }
    else{
    $(‘#slideshow nav span:nth-child(‘+el+’)’).click();
    el=el+1;
    }
    });
    });

    But it is still not moving automatically

  21. Hello,
    Thank for the tutorial.
    I can’t make it autoplay too…
    Any help ? thank you !

  22. Well. auto play works, now if someone could make even the first slide animated would be perfect!

  23. Hi! I just embed your script as WordPress slider loop, but slides change only from first to second slide, and no else (i have five slides)
    Please help! test.cadstudio.ru

    • Hi Matt!
      You have solved this problem?
      I have this problem also…
      Tomas, to which html element?
      Could you please help me?

    • I also have the problem where the slides change from 1st to 2nd and then stops. Some help would be much appreciated. Thanks.

    • Hi Massimo, thanks for the feedback! I think we could fix it now, could you check it again? Thanks a bunch, cheers, ML

    • Yes! It’s working now, could you tell me how to fix it? I’ve already implemented it on my wordpress website.

  24. Thanks so much for the FF 30 fix. I would like to add .show and .hide class names broke the slider for me and when I changed them to something else (for example: .mHide, .mShow) in both css and Js everything return to normal. I suppose there was a conflict within my project. just in case someone else encounters the same issue.

    Keep up the good work..

    • I spent about two hours trying to figure this out, only saw your comment when i came to post the solution… >.<

    • Apparently there is a bug in webkit where if you use 3d transform oi the z axis you loose the z-index reference. To work around this simply transform the text too:
      .description{ -webkit-transform: translate3d(0,0,0); }

  25. Hey guys, I’m seeing a lot of people wanting the autoplay slideshow. I made a change in the code or want to follow the change below.
    Functions should be replaced in the file titlSlider.

    Before:
    TiltSlider.prototype._init = function() {
    this._addNavigation();
    this._initEvents();
    this._autoplay(”);
    }

    After:

    TiltSlider.prototype._init = function() {
    this._addNavigation();
    this._initEvents();
    this._autoplay(”);
    }

    And the new feature should be added in the code:
    TiltSlider.prototype._autoplay = function(item) {
    var self = this;
    var i;
    this.el = document.getElementById( ‘slideshow’ );
    this.items = this.el.querySelector( ‘ol.slides’ ).children;
    // total items
    var countItens = this.items.length;
    if( !this.itemsCount ) return;

    if(item != “”){
    i = item;
    }else{
    i = 1;
    }

    window.setInterval(function() {
    console.log(i);
    self._showItem(i);
    i++;
    if(i == countItens){
    i = 0;
    }

    }, 5000)
    }

    I take good guys. This is a beautiful slideshow congratulations to the author / creator.

    • Sorry. a fix:

      *Before:
      TiltSlider.prototype._init = function() {
      this._addNavigation();
      this._initEvents();
      }

      *After:
      TiltSlider.prototype._init = function() {
      this._addNavigation();
      this._initEvents();
      this._autoplay(”);
      }

    • Hi Raphael, do you have a example where I put the second part of the code?
      I don’t understand where I have to include it

    • Hey i m still having the problem with autoplay feature, as you suggested i made changes in my titlSlider.js filw but after pasting your code it is showing some error, so could you please recheck your code

    • Hi, what’s wrong in the execution could describe? I’ll post mine in a link for you to download. hug

    • Hi Raphael, many thanks for the solution!

      I need one help, actually auto play is working fine until click event is triggered.

      For Example,
      If auto play is on slide number 5 and I clicked slide number 1 in between, then it should automatically go to slide number 2 after processing slide 1 but it doesn’t.

      It would be great help if you could help me with the code.

      Thanks in advance

  26. Hey, it seems there’s a z-index Problem in Safari. The .description Text is behind the images. Anyone who can help, I didn’t find any solution so far. The problem only exist in Safari.

  27. I seen people are trying to make this slide run automatically, well there many solutions to this:
    mine is quite simple:
    Use this at the begin of Your html: Note there is a new file which is not part of the zip you downloaded:( Jquery.1.9.1.min.js and wait.js )

    $(document).ready(function(){
    var el=1;
    repeat(4000,function(){
    if(el==7){
    $(‘#slideshow nav span:nth-child(1)’).click();
    el=2;
    }
    else{
    $(‘#slideshow nav span:nth-child(‘+el+’)’).click();
    el=el+1;
    }
    });
    });

    Now go to the Bottom of the html page make sure it looks like this:

    new TiltSlider( document.getElementById( ‘slideshow’ ) );

    • Thank you so much Derrick Lawson for taking the time to post the auto generated code for this plugin. It really means a lot thank you.

    • Thanks.

      $(document).ready(function(){
      var el=1;
      repeat(4000,function(){
      if(el==7){
      $(‘#slideshow nav span:nth-child(1)’).click();
      el=2;
      }
      else{
      $(‘#slideshow nav span:nth-child(‘+el+’)’).click();
      el=el+1;
      }
      });
      });