Latest Post

Hello mates, it's been awhile! Did you develop your own slider or tab using jquery/javascript and used display block/none on it but wonder how you could animate it though css?

Sad to say it was not possible for this css attribute because it has no transition but the good news is there's simple trick to it without using the css display! Here's how you could do it using other css attribute.

Our html tag (assuming that this html was a dynamically generated through your php or js)

<div class="slide-container">
	<div class="slide-items">
		<div class="slide-item active">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat dolores nostrum modi, dolor, neque distinctio vel ut itaque numquam quos magni dolore ea earum tempore est excepturi perspiciatis, placeat odio.</p>
		</div><!-- .slide-item -->
		<div class="slide-item">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero veritatis, porro beatae necessitatibus minima quos molestias! Voluptate adipisci iure velit quos, explicabo neque suscipit provident iusto soluta, aperiam libero, sed!</p>
		</div><!-- .slide-item -->
		<div class="slide-item">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laboriosam reiciendis ipsum, possimus sed quia. Inventore natus dolorum laboriosam non voluptates saepe. Accusamus quia error voluptates sapiente molestiae facilis repellat!.</p>
		</div><!-- .slide-item -->
		<div class="slide-item">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolorum suscipit repellat quo porro sunt modi molestias quaerat excepturi nisi amet perferendis necessitatibus praesentium tempore ad quod quam, aperiam impedit.</p>
		</div><!-- .slide-item -->
		<div class="slide-item">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestiae adipisci, consequuntur quaerat sequi harum omnis, quis quidem laborum, fugiat nemo dolores aspernatur natus. Sequi maxime praesentium ipsum quod! Accusamus.</p>
		</div><!-- .slide-item -->
	</div>

	<div class="slide-nav">
		<a class="active" href="#">1</a>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
	</div>
</div>

 

CSS

<style>
.slide-container { 
}
.slide-items { 
	position:relative; 
}
.slide-item { 
	transition:opacity 600ms ease; 
	background:#CCC;
	padding:35px;
}

/* this is the trick, position all the items whenever it’s not active yet */
.slide-item:not(.active) { 
	opacity:0; 
	pointer-events: none; 
	position:absolute; 
	top:0;
	width:100%;
}

.slide-nav {
	margin:10px 0;
}
.slide-nav a {
	border:1px solid #CCC;
	text-align: center;
	display: inline-block;
	padding:5px;
	width:30px;
	text-decoration: none;
}
.slide-nav a.active {
	font-weight:bold;
	background:#CCC;
}
</style>

 

jQuery

<script type="text/javascript">
jQuery(document).ready(function($){
	$('.slide-nav a').on('click',function(e){
		e.preventDefault();

		// this is so you could use the slider multiple times on the page
		$('.slide-item', $(this).parents('.slide-container') )
			.eq( $(this).index() )
			.addClass('active')
			.siblings()
			.removeClass('active');

		$(this).addClass('active').siblings().removeClass('active');
	})

});
</script>

 

Demo

That's it! Happy coding!