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.
2 Responses to “superslider – another great jquery slider plugin”
Leave a Reply
-
Search for:
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 [...]
Oh, a great piece of text! No idea how you were able to say this post..it’d take me days. Well worth it though, I’d suspect. Have you considered selling ads on your blog?