superslider – another great jquery slider plugin
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!
, I'm a freelancer and available now,if need help just contact me without hesitation.
One Response to “superslider – another great jquery slider plugin”
Leave a Reply
-
Search for:
-
Sponsor
Categories
- apache (2)
- css xhtml (10)
- html5 (1)
- javascript (3)
- jquery (5)
- magento (3)
- mysql (1)
- php (1)
- SEO Friendly (6)
- Tools (3)
- w3c validation (4)
- Wordpress (4)
[...] superslider – another great jquery slider plugin « birghtyoursite [...]