This is great content slider with tabs which can be used on your home page , it’s can be images slider also can used for text content.Just have a look of the demo , sure you will love it!
Online demo
Let’s have glance at the slider: super jquery slider
Options
defaults = { contentlist:'.contentlist', textlist:'.textlist', btnlist:'.btnlist', timeout:2000 }; |
the html structure ：
<div class="ifocus"> <div class="ifocus_pic"> <div class="contentlist"> <ul> <li>slider content</li> <li>slider content</li> <li>slider content</li> <li>slider content</li> </ul> </div> <div class="ifocus_opdiv"></div> <div class="textlist"> <ul> <li class="current">slide up text</li> <li>slide up text</li> <li>slide up text</li> <li>slide up text</li> </ul> </div> </div> <div class="btnlist"> <ul> <li class="current" ><img src="images/b1.gif" alt="control button 1" /></li> <li><img src="images/b2.gif" alt="control button 2" /></li> <li><img src="images/b3.gif" alt="control button 3" /></li> <li><img src="images/b4.gif" alt="control button 4" /></li> </ul> </div> </div> |
With the html structure , it’s easy to understand the options:
contentlist : the class name of the wrapper of the slide contents
textlist : the class name of the wrapper of the slide up texts
btnlist : the class name of the wrapper of the control buttons images
timeout : the auto slide change interval
how to use?
Insert those JAVASCRIPT Codes between <head> and </head>:
<link href="superslider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="javascript" src="jquery-latest.pack.js" ></script> <script type="text/javascript" language="javascript" src="jquery.superslider.js" ></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ $('.ifocus').superSlider(); }); </script> |
The html codes to show the slider:
<div class="ifocus"> <div class="ifocus_pic"> <div class="contentlist"> <ul> <li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a1.jpg" alt="" /></a></li> <li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a2.jpg" alt="" /></a></li> <li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a3.jpg" alt="" /></a></li> <li><a href="http://www.brightyoursite.com/" target="_blank"><img src="images/a4.jpg" alt="" /></a></li> </ul> </div> <div class="ifocus_opdiv"></div> <div class="textlist"> <ul> <li class="current">fire <a href=''>link</a></li> <li class="normal">design idea <a href="http://www.brightyoursite.com/blog/" target="_blank">Elegant design</a></li> <li class="normal">Beautiful city </li> <li class="normal">word of the day</li> </ul> </div> </div> <div class="btnlist"> <ul> <li class="current" id="p0"><img src="images/b1.gif" alt="" /></li> <li id="p1"><img src="images/b2.gif" alt="" /></li> <li id="p2"><img src="images/b3.gif" alt="" /></li> <li id="p3"><img src="images/b4.gif" alt="" /></li> </ul> </div> </div> |
This plugin support muti-slider one page. You also can use id to choose the slider and modify the default options, for instance :
$('#slider1,#slider2').superSlider( contentlist:'.contentlist', textlist:'.textlist', btnlist:'.btnlist', timeout:3000 ); |
That’s all, enjoy it !!!
Download Soure Codes & Example
Need customize it?
If you have problems with install or customize it , just contact me , i will help you for a very lower reasonable fee .
Donate
if you find it useful for you and like it very much , please make a
thanks for your support!