transitionend not firing. UUGGHH

njdubois · February 4, 2014

In Internet explorer, the animation plays, resets and then nothing.

<!DOCTYPE html>
<html>

<head>
 <style> 
  .mydiv
   {
    width:200px;
    position:relative;

    animation-name: right-to-left;
    animation-duration: 1s;
    animation-timing-function: ease; 
    animation-delay: 0s;           
    animation-iteration-count: 1;  
    animation-play-state:paused;
   }

  @keyframes right-to-left {
   from {left:0px;}
   to {left:-200px;}
  }

  @-webkit-keyframes right-to-left {
   from {left:0px;}
   to {left:-200px;}
  }
 </style>

 <script language="javascript" type="text/javascript">
  function start_slide() {
   document.getElementById("my-div").style.animationPlayState="running";

   document.getElementById("my-div").addEventListener( 'transitionend', function( event ) { alert( "Finished transition!" ); }, false );
   document.getElementById("my-div").addEventListener( 'transitionEnd', function( event ) { alert( "Finished transition!" ); }, false );
   document.getElementById("my-div").addEventListener( 'webkitTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false );
   document.getElementById("my-div").addEventListener( 'oTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false );
  }
 </script>
</head>

<body>
 <center>
  <div class="mydiv" id="my-div">
   <div style="display:inline-block;width:200px;height:200px;background-color:red;">1</div>
   <div style="display:inline-block;width:200px;height:200px;background-color:green;position:absolute;top:0px;left:200px;">2</div>
  </div>
	
  <input type="button" onclick="start_slide();" value="go" />
 </center>
</body>

</html>

I'm so confused, per everything I'm reading, this should work?

I know how to restart the animation, but I would RREEAALLLYYY like to know why I'm not getting a little pop up saying it's done.

What am I missing?

Thanks

Nick

nogray · February 4, 2014

Transition and Animation are different CSS properties. You are using animation in your CSS and transition in your events. You can find more details about the animation event at http://www.sitepoint.com/css3-animation-javascript-event-handlers/

Example using transition (I moved a few things around)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<!DOCTYPE html>
<html>

<head>
 <style> 
  .mydiv
   {
    width:200px;
    position:relative;
	left:0px;
	transition:left 1s;
	transition-timing-function:ease;
   }
   
   .mydiv-animated {left:-200px;}
 </style>
</head>

<body>
 <center>
  <div class="mydiv" id="my-div">
   <div style="display:inline-block;width:200px;height:200px;background-color:red;">1</div>
   <div style="display:inline-block;width:200px;height:200px;background-color:green;position:absolute;top:0px;left:200px;">2</div>
  </div>
	
  <input type="button" onclick="start_slide();" value="go" />
 </center>
 
<script language="javascript" type="text/javascript">
	function end_transition(evt){
		alert('Finished');
		document.getElementById("my-div").className = 'mydiv'; 
	}
	document.getElementById("my-div").addEventListener( 'transitionend', end_transition, false );
	document.getElementById("my-div").addEventListener( 'transitionEnd', end_transition, false );
	document.getElementById("my-div").addEventListener( 'webkitTransitionEnd', end_transition, false );
	document.getElementById("my-div").addEventListener( 'oTransitionEnd', end_transition, false );
	
	function start_slide() {
		document.getElementById("my-div").className = 'mydiv mydiv-animated';
	}
</script>
</body>

</html>
</body>
</html>

njdubois · February 5, 2014

First, Thank you so much! While I have come close to my desired effect with my OP source. I want to be doing things correctly, and that means using either, or. Not both.

Using my OP source, I was able to get exactly what I was looking for, but it only worked right in Chrome. You can see it here :

http://musicwhynot.com/slide.php

Using your modified version of my code, I did the same thing, only using your code in the right place and now I have this :

http://musicwhynot.com/slide_2.php

The second example, "works" in Chrome, Firefox and IE. Which is GREAT, but it is still doing something funky.

The first time you move the slides, left or right, it works correctly. The next time you click that exact direction, it doesn't show the transition. Using a recommendation I read about on another site, I use a timeout because sometimes the event is fired.

Say you click Left, and then Right. It's like it is doubling the distance it has to move? So you see the current slide move out of the way, about a whole slides length, and then you see the next slide move into place.

I read on another site, you need to classlist.remove and classlist.add to get the animation to run again, using this chunk of code :

document.getElementById("my-div").classList.remove("sliding_div");

document.getElementById("my-div").offsetWidth = document.getElementById("my-div").offsetWidth;

document.getElementById("my-div").classList.add("sliding_div");

I've tried "sliding_div sliding_div-left-to-right" and "sliding_div-left-to-right"

But this has no effect on anything anymore, which I guess is because that's for animations, not transitions.

Here is slide_2.php. Sorry that it is a little more complex than my OP. I hope that is ok.

<?php $slide_width=800; ?>
<!DOCTYPE html>
<html>

<head>
	<style>
		.sliding_div {
			width:<?php echo $slide_width; ?>px;
			position:relative;
			left:0px;

			transition:left 1s;
			transition-timing-function:ease;
		   }
   
		.sliding_div-left-to-right {left:-<?php echo $slide_width; ?>px;}
		.sliding_div-right-to-left {left:<?php echo $slide_width; ?>px;}
	</style>
</head>

<body style="background-color:grey;" onload="do_load();">


	<center>
	
		<br />
		<input type="button" onclick="move_last_slide();" value="<-" />
		<input type="button" onclick="move_next_slide();" value="->" /><br />
		<span id="output"></span>
		<br /><br />

		
		<div style="overflow:hidden;width:<?php echo $slide_width; ?>px;height:400px;background-color:white;">
			<div class="sliding_div" id="my-div">
				<div id="div0" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">0</td></tr></table>
				</div>

				<div id="div1" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:none;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">1</td></tr></table>
				</div>

				<div id="div2" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:none;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">2</td></tr></table>
				</div>

				<div id="div3" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:none;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">3</td></tr></table>
				</div>

			</div>
		</div>
	</center>



 
	<script language="javascript" type="text/javascript">
		var num_slides=3; // INCLUDES 0!

		var cur_slide=0;

		var last_slide;
		var next_slide;

		var in_motion=0;

		var slide_width = <?php echo $slide_width; ?>;

		document.getElementById("my-div").addEventListener( 'transitionend', end_transition, false );
		document.getElementById("my-div").addEventListener( 'transitionEnd', end_transition, false );
		document.getElementById("my-div").addEventListener( 'webkitTransitionEnd', end_transition, false );
		document.getElementById("my-div").addEventListener( 'oTransitionEnd', end_transition, false );

		function do_load() {
			// Set Variables
			change_slide(0)
		};

		function change_slide(new_slide_num) {
			// new_slide_num will equal cur_slide +1 or cur_slide -1

			cur_slide = new_slide_num;

			if ( cur_slide < 0 ) { cur_slide=num_slides; }
			if ( cur_slide > num_slides ) { cur_slide = 0; }


			last_slide = cur_slide - 1;
			if ( last_slide < 0 ) { last_slide=num_slides; }


			next_slide = cur_slide + 1;
			if ( next_slide > num_slides ) { next_slide = 0;	}

			document.getElementById("output").innerHTML = "cur_slide = " + cur_slide + ", num_slides = " + num_slides + ", next_slide = " + next_slide + ", last_slide = " + last_slide;
		};

		function move_next_slide() {
			if (in_motion==0) {
				document.getElementById("div" + next_slide).style.display="inline-block";
				document.getElementById("div" + next_slide).style.left = (slide_width + "px");

				cur_slide++;
				change_slide(cur_slide);

				in_motion=1;

				document.getElementById("my-div").className = 'sliding_div sliding_div-left-to-right';

				setTimeout("end_transition()", 1000);
			}
		};

		function move_last_slide() {
			if (in_motion==0) {
				document.getElementById("div" + last_slide).style.display="inline-block";
				document.getElementById("div" + last_slide).style.left = "-" + slide_width + "px";

				cur_slide--;
				change_slide(cur_slide);

				in_motion=1;

				document.getElementById("my-div").className = 'sliding_div sliding_div-right-to-left';

				setTimeout("end_transition()", 1000);
			}
		};

		function end_transition(evt){
			if (in_motion==1) {

				for (var i=0;i<=num_slides;i++) { 
					document.getElementById("div" + i).style.display="none";
				}

				document.getElementById("div" + cur_slide).style.display="inline-block";

				in_motion=0;
			}
		};

	</script>
</body>

</html>

What am I missing to get this to "restart?"

Thanks for the help in the first place. Really! Much appreciated. If you havn't figured it out yet, I'm trying to create my own simple content slider.

Nick

Edited February 5, 2014 by njdubois

njdubois · February 5, 2014

FYI, the code for slide.php :

<?php $slide_width=800; ?>
<!DOCTYPE html>
<html>

<head>
	<style>
		.sliding_div	{
			width:<?php echo $slide_width; ?>px;
			position:relative;

			animation-name: right-to-left;
			animation-duration: 1s;
			animation-timing-function: ease; 
			animation-delay: 0s;           
			animation-iteration-count: 1;  
			animation-play-state:paused;
			backface-visibility: hidden;

			-moz-animation-name: right-to-left;
			-moz-animation-duration: 1s;
			-moz-animation-timing-function: ease; 
			-moz-animation-delay: 0s;           
			-moz-animation-iteration-count: 1;  
			-moz-animation-play-state:paused;
			-moz-backface-visibility: hidden;

			-webkit-animation-name: right-to-left;
			-webkit-animation-duration: 1s;
			-webkit-animation-timing-function: ease; 
			-webkit-animation-delay: 0s;           
			-webkit-animation-iteration-count: 1;  
			-webkit-animation-play-state:paused;
			-webkit-backface-visibility: hidden;
		}

		@keyframes right-to-left {
			from {left:0px;}
			to {left:-<?php echo $slide_width; ?>px;}
		}

		@-webkit-keyframes right-to-left {
			from {left:0px;}
			to {left:-<?php echo $slide_width; ?>px;}
		}

		@-moz-keyframes right-to-left {
			from {left:0px;}
			to {left:-<?php echo $slide_width; ?>px;}
		}


		@keyframes left-to-right {
			from {left:0px;}
			to {left:<?php echo $slide_width; ?>px;}
		}

		@-webkit-keyframes left-to-right {
			from {left:0px;}
			to {left:<?php echo $slide_width; ?>px;}
		}

		@-moz-keyframes left-to-right {
			from {left:0px;}
			to {left:<?php echo $slide_width; ?>px;}
		}
	</style>

	<script language="javascript" type="text/javascript">
		var num_slides=3; // INCLUDES 0!

		var cur_slide=0;

		var last_slide;
		var next_slide;

		var in_motion=0;

		var slide_width = <?php echo $slide_width; ?>;

		function do_load() {
			change_slide(0)
		};

		function change_slide(new_slide_num) {
			cur_slide = new_slide_num;

			if ( cur_slide < 0 ) { cur_slide=num_slides; }
			if ( cur_slide > num_slides ) { cur_slide = 0; }


			last_slide = cur_slide - 1;
			if ( last_slide < 0 ) { last_slide=num_slides; }


			next_slide = cur_slide + 1;
			if ( next_slide > num_slides ) { next_slide = 0;	}

			document.getElementById("output").innerHTML = "cur_slide = " + cur_slide + ", num_slides = " + num_slides + ", next_slide = " + next_slide + ", last_slide = " + last_slide;
		};


		function move_next_slide() {
			if (in_motion==0) {
				document.getElementById("div" + next_slide).style.display="inline-block";
				document.getElementById("div" + next_slide).style.left = (slide_width + "px");

				cur_slide++;
				change_slide(cur_slide);

				in_motion=1;

				document.getElementById("my-div").classList.remove("sliding_div");
				document.getElementById("my-div").offsetWidth = document.getElementById("my-div").offsetWidth;
				document.getElementById("my-div").classList.add("sliding_div");

				document.getElementById("my-div").style.animationName="right-to-left";
				document.getElementById("my-div").style.webkitAnimationName="right-to-left";
				document.getElementById("my-div").style.mozAnimationName="right-to-left";

				document.getElementById("my-div").style.animationPlayState="running";
				document.getElementById("my-div").style.webkitAnimationPlayState="running";
				document.getElementById("my-div").style.mozAnimationPlayState="running";

				setTimeout("move_done()", 990);
			}
		};

		function move_last_slide() {
			if (in_motion==0) {
				document.getElementById("div" + last_slide).style.display="inline-block";
				document.getElementById("div" + last_slide).style.left = "-" + slide_width + "px";

				cur_slide--;
				change_slide(cur_slide);

				in_motion=1;

				document.getElementById("my-div").classList.remove("sliding_div");
				document.getElementById("my-div").offsetWidth = document.getElementById("my-div").offsetWidth;
				document.getElementById("my-div").classList.add("sliding_div");

				document.getElementById("my-div").style.animationName="left-to-right";
				document.getElementById("my-div").style.webkitAnimationName="left-to-right";
				document.getElementById("my-div").style.mozAnimationName="left-to-right";

				document.getElementById("my-div").style.animationPlayState="running";
				document.getElementById("my-div").style.webkitAnimationPlayState="running";
				document.getElementById("my-div").style.mozAnimationPlayState="running";

				setTimeout("move_done()", 1000);
			}
		};


		function move_done() {

			for (var i=0;i<=num_slides;i++) { 
				document.getElementById("div" + i).style.display="none";
			}

			document.getElementById("div" + cur_slide).style.display="inline-block";
			document.getElementById("div" + cur_slide).style.left = "0px";

			in_motion="0";
		};

	</script>



</head>

<body style="background-color:grey;" onload="do_load();">
	<center>
	
		<br />
		<input type="button" onclick="move_last_slide();" value="<-" />
		<input type="button" onclick="move_next_slide();" value="->" /><br />
		<span id="output"></span>
		<br /><br />

		
		<div style="overflow:hidden;width:<?php echo $slide_width; ?>px;height:400px;background-color:white;">
			<div class="sliding_div" id="my-div">
				<div id="div0" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">0</td></tr></table>
				</div>

				<div id="div1" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:none;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">1</td></tr></table>
				</div>

				<div id="div2" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:none;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">2</td></tr></table>
				</div>

				<div id="div3" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:none;">
					<table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">3</td></tr></table>
				</div>

			</div>
		</div>
	</center>
</body>

</html>

nogray · February 5, 2014

FYI, if you change the display css property, the transition is reset and will not work. It's much easier to make a content slider without any transition (just animate the CSS properties using JavaScript). JQuery will make it much easier.

If you want to use CSS transition, here is a quick example that shows how to do it using CSS and basic JavaScript.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<style>
	.slider_holder {position:relative;
		width:500px;
		height:500px;
		border:solid #000000 1px;
		margin:auto;
		overflow:hidden;}
		
	.slide {position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		opacity: 1;
		text-align:center;
		-webkit-transition:left 1s, opacity 1s;
		-moz-transition:left 1s, opacity 1s;
		transition:left 1s, opacity 1s;
		-webkit-transition-timing-function:ease;
		-moz-transition-timing-function:ease;
		transition-timing-function:ease;}
		
	.slide.hidden {left:-100%;
		opacity:0;}
		
	.slide.next {left:100%;
		right:auto;
		opacity:0;
		-webkit-transition-duration:0s;
		-moz-transition-duration:0s;
		transition-duration:0s;}
</style>
<div class="slider_holder" id="my_slides">
    <div class="slide">Slide 1</div>
    <div class="slide next">Slide 2</div>
    <div class="slide next">Slide 3</div>
</div>
<button onclick="previous();">Previous</button> <button onclick="next();">Next</button>
<script type="text/javascript">
	// current slide
	var current_slide = 1;
	// checking if we need to add the event
	var did_add_evt = false;
	// making sure the transition doesn overlap
	var is_transition = false;
	function gotoSlide(num){
		// if same slide skip
		if (num == current_slide) return;
		
		// if the transition is running, return
		if (is_transition) return;
		
		is_transition = true;
		
		// slides
		var slides = document.getElementById('my_slides').querySelectorAll('.slide');
		// adding the event
		if (!did_add_evt){
			var end_func = function(){
					if (this.className.indexOf('hidden') != -1)
						this.className = 'slide next';
						
					is_transition = false
				};
			
			for (var i=0; i<slides.length; i++){
				slides[i].addEventListener('transitionend', end_func, false);
				slides[i].addEventListener('transitionEnd', end_func, false);
				slides[i].addEventListener('webkitTransitionEnd', end_func, false);
				slides[i].addEventListener('oTransitionEnd', end_func, false);
			}
		}
		
		// making sure the number is not larger than the slides
		if (num > slides.length) num = 1;
		// making sure the slides are not smaller than zero
		if (num < 1) num = slides.length;
		
		slides[current_slide - 1].className = 'slide hidden';
		
		current_slide = num;
		slides[current_slide - 1].className = 'slide'
	}
	
	function previous(){
		gotoSlide(current_slide - 1);
	}
	
	function next(){
		gotoSlide(current_slide + 1);
	}
</script>
</body>
</html>

njdubois · February 6, 2014

I am honestly not use to getting such whole examples of code. Thank you! It really shows that there is quite a few ways of doing this.

Using your latest code example, I was able to get even closer to what I am looking for. It now works the same in every browser. I was able to add the animation and logic to move the slides the other way. But the first time I switch directions, I get this bounce back. Then each slide in that same direction works ok.

I know it has something to do with the current class for each slide, and you will notice that i for loop through all slides setting them to the right class. This seems to work...after the first click switching directions. I know I have to apply a certain class to a certain slide, but am not sure what or where?

Again, thanks for your help, A few days ago all this animation/transition stuff seemed so confusing!

Here is the updated version of your code. I had to take the function that moved to a cell, and apply it to each direction function instead. This way I could set and play with current and the "next" slide before any numbers changed.

You can see it live here : http://musicwhynot.com/slide_3.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Content Slider Example</title>
</head>

<body>

<style>
	.slider_holder {
		position:relative;
		width:500px;
		height:500px;
		border:solid #000000 1px;
		margin:auto;
		overflow:hidden;
	}
		
	.slide {
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		opacity: 1;
		text-align:center;
		-webkit-transition:left 1s, opacity 1s;
		-moz-transition:left 1s, opacity 1s;
		transition:left 1s, opacity 1s;
		-webkit-transition-timing-function:ease;
		-moz-transition-timing-function:ease;
		transition-timing-function:ease;
	}
		
	.slide.hidden_to_left {
		left:-100%;
		opacity:0;
	}

	.slide.hidden_to_right {
		left:100%;
		opacity:0;
	}
		
	.slide.next {
		left:100%;
		right:auto;
		opacity:0;
		-webkit-transition-duration:0s;
		-moz-transition-duration:0s;
		transition-duration:0s;
	}

	.slide.last {
		left:-100%;
		right:auto;
		opacity:0;
		-webkit-transition-duration:0s;
		-moz-transition-duration:0s;
		transition-duration:0s;
	}

</style>

<div class="slider_holder" id="my_slides">
    <div class="slide">Slide 1</div>
    <div class="slide last">Slide 2</div>
    <div class="slide last">Slide 3</div>
    <div class="slide last">Slide 4</div>
    <div class="slide last">Slide 5</div>
    <div class="slide last">Slide 6</div>
</div>

<button onclick="previous();">Previous</button> <button onclick="next();">Next</button>

<script type="text/javascript">
	// current slide
	var current_slide = 1;
	// checking if we need to add the event
	var did_add_evt = false;
	// making sure the transition doesn overlap
	var is_transition = false;

	function previous(){
		// slides
		var slides = document.getElementById('my_slides').querySelectorAll('.slide');

		// if the transition is running, return
		if (is_transition) return;

		num = current_slide - 1;

		for (var i=0;i<=slides.length -1;i++) { 
			slides[i].className = 'slide last';
		}

		slides[current_slide - 1].className = 'slide';

		// making sure the number is not larger than the slides
		if (num > slides.length) num = 1;
		// making sure the slides are not smaller than zero
		if (num < 1) num = slides.length;

		is_transition = true;
		
		// adding the event
		if (!did_add_evt){
			var end_func = function(){
					if (this.className.indexOf('hidden') != -1)
						this.className = 'slide last';
						
					is_transition = false
				};
			
			for (var i=0; i<slides.length; i++){
				slides[i].addEventListener('transitionend', end_func, false);
				slides[i].addEventListener('transitionEnd', end_func, false);
				slides[i].addEventListener('webkitTransitionEnd', end_func, false);
				slides[i].addEventListener('oTransitionEnd', end_func, false);
			}
		}
				
		slides[current_slide - 1].className = 'slide hidden_to_right';
		current_slide = num;
		slides[current_slide - 1].className = 'slide'
	}
	
	function next(){

		// slides
		var slides = document.getElementById('my_slides').querySelectorAll('.slide');

		// if the transition is running, return
		if (is_transition) return;

		num = current_slide + 1;

		for (var i=0;i<=slides.length -1;i++) { 
			slides[i].className = 'slide next';
		}

		slides[current_slide - 1].className = 'slide';

		// making sure the number is not larger than the slides
		if (num > slides.length) num = 1;
		// making sure the slides are not smaller than zero
		if (num < 1) num = slides.length;

		is_transition = true;
		
		// adding the event
		if (!did_add_evt){
			var end_func = function(){
					if (this.className.indexOf('hidden') != -1)
						this.className = 'slide next';
						
					is_transition = false
				};
			
			for (var i=0; i<slides.length; i++){
				slides[i].addEventListener('transitionend', end_func, false);
				slides[i].addEventListener('transitionEnd', end_func, false);
				slides[i].addEventListener('webkitTransitionEnd', end_func, false);
				slides[i].addEventListener('oTransitionEnd', end_func, false);
			}
		}
		

		
		slides[current_slide - 1].className = 'slide hidden_to_left';
		current_slide = num;
		slides[current_slide - 1].className = 'slide'
	}
</script>
</body>
</html>

Edited February 6, 2014 by njdubois

nogray · February 6, 2014

You actually only need to move the slides that will hide and show, so you don't have to loop all over them. The reason the bounce happens is because it takes some time for the transition to happen (even if its set to zero second), so the first time you try to move it from one side to the other it doesn't happen. Here is a section of code to show how to fix it using a small timeout (this is in the previous function).

num = current_slide - 1;

		/*for (var i=0;i<=slides.length -1;i++) { 
			slides[i].className = 'slide last';
		}

		slides[current_slide - 1].className = 'slide';*/

		// making sure the number is not larger than the slides
		if (num > slides.length) num = 1;
		// making sure the slides are not smaller than zero
		if (num < 1) num = slides.length;
		
		if (slides[num - 1].className.indexOf('last') == -1){
			slides[num - 1].className = 'slide last';
			setTimeout(previous, 100);
			return;
		}

		is_transition = true;

I'll still recommend you use one function for back and forth and have the next and previous logic based on the number compared to the current slide (e.g. if number is bigger than current slide, class is hide to left). The reason for that is so you can add ticks for each slide where the user can move to any slide without going through all of them.

Hope this helps.

njdubois · February 7, 2014

nogray, I really can't say it enough. Thank you. I spent the whole week on this, posted in a few places and you are the only one to reply. Not only are you the only one to reply, but you provided such great answers. Some would argue you gave me to much info!

It worked of course. I really appreciate it. I am trying to model off another sites slider for a friends page. It did not have the ticks, but I can see how to change up the existing code to add one if they change their mind.

All the available content sliders seemed so bulking and I didn't know what I was getting into when I tried to write me own. At least now I have a basic understanding of moving stuff around in a pretty way. Should come in handy later huh!

Thanks again!!!

Sign In

transitionend not firing. UUGGHH

Recommended Posts

njdubois

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

njdubois

Link to comment

Share on other sites

njdubois

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

njdubois

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

njdubois

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information