Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery based slideshow/transitions for HTML content

Searching for rotators based on JQuery only finds the original rotator plugin and a bunch of photo galleries, which I don't want. Please suggest other rotators available. The rotator should be able to rotate HTML not just images (like the Glimmer tool, which can create JQuery/HTML code for rotating images).

like image 906
mare Avatar asked Sep 10 '26 16:09

mare


2 Answers

Why use plug-in's? use this one liner (i just separated it into 3 lines for the sake of readability)

see demo

Your HTML should be something like this

HTML

<div class="yourContainer">
 <div>some html</div>
 <div>other html</div>
</div>

JS / jQuery

$(function(){
    $('.yourContainer div:gt(0)').hide();
    setInterval(function(){$('.yourContainer :first-child').fadeOut().next().fadeIn().end().appendTo('.yourContainer');}, 3000);
});

CSS (optional = makes transition smoother)

.yourContainer{ position:relative;}
.yourContainer div{ position:absolute; hight:300px; width:300px; background:red; }
like image 88
adardesign Avatar answered Sep 14 '26 01:09

adardesign


How about:

  • jQuery Cycle Plugin
  • jQuery Flip Plugin

You can even modify/customize these plugins to create the kind of effect you want.

like image 24
Sarfraz Avatar answered Sep 14 '26 01:09

Sarfraz



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!