Skip to content

Instantly share code, notes, and snippets.

@Wilto
Created July 26, 2011 17:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Wilto/1107253 to your computer and use it in GitHub Desktop.
Save Wilto/1107253 to your computer and use it in GitHub Desktop.
Example Fade-y Slideshow Thing
.faderotate {
height: 250px;
position: relative;
width: 100%;
}
.faderotate .slide {
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.faderotate .hidden {
left: -9999px;
}
<a href="#" class="next">Next</a>
<a href="#" class="prev">Prev</a>
<ol class="faderotate">
<li class="slide">
Stuff
</li>
<li class="slide">
Things
</li>
</ol>
$('.slide').not(':first').addClass('hidden');
$('.next, .prev').click(function(e) {
var $vis = $('.slide:visible'),
$prev = $(e.target).hasClass('prev');
$goto = $vis[ $prev ? "prev" : "next" ]();
$goto.length && $vis.addClass('hidden')
[ $prev ? "prev" : "next" ]()
.removeClass('hidden');
});
@Wilto
Copy link
Author

Wilto commented Jul 26, 2011

Untested and not, y’know, in an actual HTML document.

@Wilto
Copy link
Author

Wilto commented Jul 26, 2011

Oh, sorry—the above is just gonna show/hide instantly without a transition of some sort, which you could do using opacity and transitions, or jQuery’s native fadeOut/fadeIn functionality.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment