CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com/downloads/sliderota-jquery-plugin/?replytocom=9023","20101120112834","https://web.archive.org/","web","/_static/", "1290252514"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content=" The new design on Themes by bavotasan.com required a content slider so I built a simple jQuery plugin that would work the way I needed it to. There isn't..."/> <meta name="keywords" content="Background Url,Click,end,Function,Images,jquery,loop,overflow,plugin,Png,Slides,Slideshow,speed,timer,Width,"/> <title>Sliderota jQuery Plugin | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20101120112834cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.8" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20101120112834im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20101120112834/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20101120112834/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Sliderota jQuery Plugin Comments Feed" href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/sliderota-jquery-plugin/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20101120112834js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="A Slightly New Design for Themes by bavotasan.com" href="https://web.archive.org/web/20101120112834/http://bavotasan.com/articles/slightly-new-design-for-themes-by-bavotasan-com/"/> <link rel="next" title="Gradient Buttons with CSS3" href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/gradient-buttons-with-css3/"/> <link rel="canonical" href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/sliderota-jquery-plugin/"/> <link rel="shortlink" href="https://web.archive.org/web/20101120112834/http://bit.ly/c9eYpO"/> <script type="text/javascript" src="https://web.archive.org/web/20101120112834js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="Sliderota jQuery Plugin"/> <meta property="og:description" content="The new design on Themes by bavotasan.com required a content slider so I built a simple jQuery plugin that would work the way I needed it to. There isn鈥檛 much to it but you can set the speed, slide timer, easing and if you want it to work solely as a content slider or as [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20101120112834im_/http://bavotasan.com/wp-content/uploads/2010/04/sliderota-sml.jpg"/> </head> <body class="single single-post postid-1973"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20101120112834/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20101120112834/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20101120112834/http://themes.bavotasan.com/support/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20101120112834/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/"> <img src="https://web.archive.org/web/20101120112834im_/http://bavotasan.com/wp-content/themes/bavotasan-2010/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> </a> </div> <div id="follow"> <a href="https://web.archive.org/web/20101120112834/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/">Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/category/articles/">Articles</a></li> <li id="menu-item-2265"><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/category/tutorials/">Tutorials</a></li> <li id="menu-item-2267" class="current-menu-item"><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/category/downloads/">Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Apr</div><div class="day">21</div><div class="year">2010</div></div> <h1>Sliderota jQuery Plugin</h1> <img src="https://web.archive.org/web/20101120112834im_/http://bavotasan.com/wp-content/uploads/2010/04/sliderota-570x240.jpg" alt="" title="sliderota" width="570" height="240" class="aligncenter size-medium wp-image-1976"/> The new design on <a href="https://web.archive.org/web/20101120112834/http://themes.bavotasan.com/">Themes by bavotasan.com</a> required a content slider so I built a simple <a href="https://web.archive.org/web/20101120112834/http://jquery.com/">jQuery</a> plugin that would work the way I needed it to. There isn’t much to it but you can set the speed, slide timer, easing and if you want it to work solely as a content slider or as a slideshow. It even loops so you don’t have any of that ugly backwards sliding when it hits the end. Here is the basic CSS you need: <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">#sliderota { width: 900px; /* change to the width you want */ height: 380px; /* change to the height you want */ overflow: hidden; position: relative; background: url(../images/bigad_bg.png) no-repeat; }   #sliderota .slides { position: absolute; top: 0; left: 0; }   #sliderota img { float: left; }   #sliderota ul { position: absolute; bottom: 10px; left: 10px; z-index: 100; list-style: none; padding: 0; margin: 0; }   #sliderota ul li { float: left; }   #sliderota ul li a { background: url(../images/controls.png) no-repeat 0 0; width: 16px; height: 16px; display: block; }   #sliderota ul li.selected a { background-position: -18px 0; }   #sliderota .controls a { z-index: 100; position: absolute; right: 10px; bottom: 10px; background: url(../images/controls.png) no-repeat -54px 0; width: 16px; height: 16px; }   #sliderota .controls a.play { display: none; background-position: -36px 0; }</pre></div></td></tr></table></div> Here is the basic HTML: <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><div id="sliderota"> <div class="slides"> <a href="http://themes.bavotasan.com/our-themes/premium-themes/moderno"><img src="images/moderno_bigad.png" width="900" height="380" alt="Moderno" /></a> <a href="http://themes.bavotasan.com/our-themes/premium-themes/magazine-premium"><img src="images/magprem_bigad.png" width="900" height="380" alt="Magazine Premium" /></a> <a href="http://themes.bavotasan.com/our-themes/premium-themes/stationery"><img src="images/stationery_bigad.png" width="900" height="380" alt="Stationery" /></a> <a href="http://themes.bavotasan.com/our-themes/premium-themes/illustrious"><img src="images/illustrious_bigad.png" width="900" height="380" alt="Illustrious" /></a> </div> </div></pre></div></td></tr></table></div> Of course, you need to call jQuery and the plugin function: <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="php" style="font-family:monospace;"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.sliderota.js"></script> <script type="text/javascript"> $("#sliderota").sliderota(); </script></pre></div></td></tr></table></div> If you are only using <a href="https://web.archive.org/web/20101120112834/http://jquery.com/">jQuery</a> 1.3.2, then you will also have to include the <a href="https://web.archive.org/web/20101120112834/http://gsgd.co.uk/sandbox/jquery/easing/">Easing plugin</a> to use the advanced easing options that are included in the Core UI v1.8.0. And now for the plugin: <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">/** * jQuery.sliderota * Version 1.0 * Copyright (c) 2010 c.bavota - http://bavotasan.com * Dual licensed under MIT and GPL. * Date: 04/22/2010 **/ (function($) { $.fn.sliderota = function(options) { // setting the defaults // $("#sliderota").sliderota({speed: 3000, timer: 6000, slideshow: true, easing: "easeInOutQuint"}); var defaults = { speed: 3000, timer: 6000, slideshow: true, easing: 'easeInOutQuint' }; var options = $.extend(defaults, options);   // and the plugin begins return this.each(function() { // initializing the variables var loop, counter, obj, totalWidth, itemWidth, curLeft, itemNum, limit;   // creating the object variable obj = $(this);   counter = 0; itemWidth = obj.find(".slides").width(); itemNum = obj.find(".slides a").length; totalWidth = (itemNum + 1) * itemWidth; limit = -(itemNum * itemWidth);   obj .find(".slides").css({ width: totalWidth+"px" }) .end() .append("<ul></ul>") .find(".slides a").each(function() { $("<li><a href='javascript:void(0)' class='slide_"+counter+"'></a></li>").appendTo(obj.find("ul")); counter++; }) .end() .find("ul li:eq(0)").addClass("selected") .end() .find(".slides a:eq(0)").clone().appendTo("#simpleslider .slides") .end() // creating the click event .find("ul li a").live('click', function() { obj.find("ul li").each(function() { $(this).removeClass("selected"); }); curLeft = $(this).attr('class').replace("slide_",""); curLeft = -(curLeft * itemWidth);   $(this).parent().addClass("selected"); obj // selecting the object .find(".slides").stop().animate({ left: curLeft+"px" }, options.speed, options.easing) .end() .find(".controls a.play").show() .end() .find(".controls a.pause").hide(); clearTimeout(loop); });   // slideshow functionality if(options.slideshow) { // adding the play/pause controls obj // selecting the object .append("<div class='controls'></div>") .find(".controls") .append("<a href='javascript:void(0)' class='play'></a>") .append("<a href='javascript:void(0)' class='pause'></a>") .end() // creating the play click event .find(".controls .play").click(function() { loop = setTimeout(function() { moveSlides(); }, options.timer); $(this).hide(); obj.find(".controls .pause").show(); }) .end() // creating the pause click event .find(".controls .pause").click(function() { clearTimeout(loop); obj.find(".controls .play").show(); $(this).hide(); });   // creating the loop for the slideshow loop = setTimeout(function() { moveSlides(); }, options.timer);   // creating the function to move the slides function moveSlides() { obj.find("ul li").each(function() { $(this).removeClass("selected"); }) curLeft = obj.find(".slides").css('left').replace("px", ""); curItem = (Math.abs(curLeft) / itemWidth)+1; if(curLeft==limit+itemWidth) { obj.find('ul li:eq(0)').addClass("selected"); } else { obj.find('ul li a.slide_'+curItem).parent().addClass("selected"); } curLeft = curLeft - itemWidth; obj.find(".slides").stop().animate({ left: curLeft+"px" }, options.speed, options.easing, function() { if(curLeft==limit) { obj.find(".slides").css({ left: "0px" }); } }); loop = setTimeout(function() { moveSlides(); }, options.timer); }; }; }); }; })(jQuery);</pre></div></td></tr></table></div> The options are pretty simple: <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="javascript" style="font-family:monospace;">$("#sliderota").sliderota({ speed: 3000, timer: 6000, slideshow: true, easing: "easeInOutQuint" });</pre></div></td></tr></table></div> <div class="buttonbox"> <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/download-manager.php?id=26" class="button">Download</a><a href="https://web.archive.org/web/20101120112834/http://themes.bavotasan.com/" class="button">Demo</a> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20101120112834/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2Fc9eYpO&counturl=http://bavotasan.com/downloads/sliderota-jquery-plugin/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20101120112834js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20101120112834/http://www.facebook.com/sharer.php?u=http://bavotasan.com/downloads/sliderota-jquery-plugin/&t=Sliderota jQuery Plugin" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20101120112834/http://digg.com/submit?phase=2&url=http://bavotasan.com/downloads/sliderota-jquery-plugin/&title=Sliderota jQuery Plugin&bodytext=The new design on Themes by bavotasan.com required a content slider so I built a simple jQuery plugin that would work the way I needed it to. There isn鈥檛 much to it but you can set the speed, slide timer, easing and if you want it to work solely as a content slider or as [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20101120112834/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20101120112834/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/sliderota-jquery-plugin/')+'&title='+encodeURIComponent('Sliderota jQuery Plugin'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20101120112834/http://www.stumbleupon.com/submit?url=http://bavotasan.com/downloads/sliderota-jquery-plugin/&title=Sliderota jQuery Plugin" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20101120112834if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Fdownloads%2Fsliderota-jquery-plugin%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"><div class="help"></div>If you require help or support, please visit the <a href="https://web.archive.org/web/20101120112834/http://support.bavotasan.com/" title="Support Forum">Support Forum</a> and ask all your questions there. Questions about themes or plugins posted in the comments below will not be answered.</div> <div class="post"> Tags: <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/background-url/" rel="tag">Background Url</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/click/" rel="tag">Click</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/end/" rel="tag">end</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/function/" rel="tag">Function</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/images/" rel="tag">Images</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/jquery/" rel="tag">jquery</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/loop/" rel="tag">loop</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/overflow/" rel="tag">overflow</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/plugin/" rel="tag">plugin</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/png/" rel="tag">Png</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/slides/" rel="tag">Slides</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/slideshow/" rel="tag">Slideshow</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/speed/" rel="tag">speed</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/timer/" rel="tag">timer</a>, <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tag/width/" rel="tag">Width</a> Short URL: <a href="https://web.archive.org/web/20101120112834/http://bit.ly/c9eYpO" title="Sliderota jQuery Plugin">http://bit.ly/c9eYpO</a> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/my-first-vanilla-plugin/" rel="bookmark" title="Permanent Link to My First Vanilla Plugin">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" rel="bookmark" title="Permanent Link to Delete Duplicate Posts Pro WordPress Plugin">Delete Duplicate Posts Pro WordPress Plugin</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/" rel="bookmark" title="Permanent Link to A Basic jQuery Slideshow">A Basic jQuery Slideshow</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/optimization-tips-speed-up-site/" rel="bookmark" title="Permanent Link to Optimization Tips to Speed Up Your Site">Optimization Tips to Speed Up Your Site</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/jquery-replace-word-with-link/" rel="bookmark" title="Permanent Link to Use jQuery to Replace a Word with a Link">Use jQuery to Replace a Word with a Link</a></li> </ul> </div> <a href="https://web.archive.org/web/20101120112834/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20101120112834im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20101120112834im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion 3 Comments </h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-8915"> <div id="comment-8915"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101120112834im_/http://0.gravatar.com/avatar/82ae24c1abb2d6a58b32478e190452af?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <a href="https://web.archive.org/web/20101120112834/http://www.eavasi.ru/" rel="external " class="url">eavasi</a> on April 22, 2010 at 2:34 am </div> <div class="comment-text"> Great design! Very cool! Wonderful jQuery code-slide effect! </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101120112834/http://bavotasan.com/downloads/sliderota-jquery-plugin/?replytocom=8915#respond" onclick="return addComment.moveForm("comment-8915", "8915", "respond", "1973")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-9023"> <div id="comment-9023"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101120112834im_/http://0.gravatar.com/avatar/82ae24c1abb2d6a58b32478e190452af?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <a href="https://web.archive.org/web/20101120112834/http://www.eavasi.ru/" rel="external " class="url">eavasi</a> on April 28, 2010 at 2:15 am </div> <div class="comment-text"> I am from Russian bloggers. I can tell you exactly that Russian bloggers are not actively using the sliders in the themes of their blogs. However, they like very much templates with fluid width depending on the resolution of the monitor user. Thank you for the article. Perhaps the time will come when the Russian blogs sliders’ll be very popular. </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101120112834/http://bavotasan.com/downloads/sliderota-jquery-plugin/?replytocom=9023#respond" onclick="return addComment.moveForm("comment-9023", "9023", "respond", "1973")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-12581"> <div id="comment-12581"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20101120112834im_/http://0.gravatar.com/avatar/8fd6cadc79df5852087f1fa64204fbae?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <a href="https://web.archive.org/web/20101120112834/http://lafreebeee.com/" rel="external " class="url">David</a> on July 10, 2010 at 1:29 am </div> <div class="comment-text"> I love the slider. Thanks Also your new site looks great! </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20101120112834/http://bavotasan.com/downloads/sliderota-jquery-plugin/?replytocom=12581#respond" onclick="return addComment.moveForm("comment-12581", "12581", "respond", "1973")">Reply</a> </div> </div> </li> </ol> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply to <a href="#comment-9023">eavasi</a> <a rel="nofollow" id="cancel-comment-reply-link" href="/web/20101120112834/http://bavotasan.com/downloads/sliderota-jquery-plugin/#respond">Cancel reply</a></h3> <form action="https://web.archive.org/web/20101120112834/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> Your email address will not be published. Required fields are marked * <label for="author">Name</label> * <input id="author" name="author" type="text" value="" size="30"/> <label for="email">Email</label> * <input id="email" name="email" type="text" value="" size="30"/> <label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30"/> To enter code in the comment box, please place it between <pre lang="php"> </pre> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor. <textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="1973" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="9023"/> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20101120112834/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>   <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/articles/magazine-premium-is-out/" title="Magazine Premium v1.1.5 is Out!">Magazine Premium v1.1.5 is Out!</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/php-code-to-redirect-mobilehandheld-users/" title="PHP Code to Redirect Mobile/Handheld Users">PHP Code to Redirect Mobile/Handheld Users</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/adding-extra-fields-to-the-wordpress-user-profile/" title="Adding Extra Fields to the WordPress User Profile">Adding Extra Fields to the WordPress User Profile</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20101120112834/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20101120112834/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <a href="https://web.archive.org/web/20101120112834/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20101120112834/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for FREE? All you need to do is <a href="https://web.archive.org/web/20101120112834/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/free-premium-theme/" class="fr">Click here for more information »</a> </div> <div class="side-widget"> <h4>Support c.bavota</h4> If you would like to support <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know). <a href="https://web.archive.org/web/20101120112834/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top</a> <div class="col col1"> <h4 class="one">Stay in Touch</h4> <a href="https://web.archive.org/web/20101120112834/http://twitter.com/bavotasan" class="footer-twitter">Follow me on Twitter</a> <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/feed/" class="footer-rss">Subscribe to my RSS Feed</a> <h4 class="two">Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three">Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/my-first-vanilla-plugin/">My First Vanilla Plugin</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> </ul> </div> <div class="col col3"> <h4 class="four">Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/add-a-copyright-notice-to-copied-text/">Add a Copyright Notice to Copied Text</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/meta-descriptions-wordpress/">Meta Descriptions for WordPress</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/turning-on-php-errors/">Turning On PHP Errors</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/using-css-resets/">Using CSS Resets</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/a-sleek-navigation-menu-with-css3/">A Sleek Navigation Menu with CSS3</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/a-basic-jquery-slideshow/">A Basic jQuery Slideshow</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/developing-themes-for-wordpress-make-money/">Developing Themes for WordPress: Part 5</a></li> <li><a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/tutorials/developing-themes-for-wordpress-options/">Developing Themes for WordPress: Part 4</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20101120112834/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20101120112834/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20101120112834js_/http://stats.wordpress.com/e-201046.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'1973'}); var load_cmc = function(){linktracker_init(5317602,1973,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20101120112834js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20101120112834/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>