nice jquery content slider
In my portfolio page , i want to have a content silder to show some of my works ,but didn’t find a satisfied one by google .so i decide to code it myself. You can check the final result here : http://www.brightyoursite.com/portfolio.html ,
Let’s see how it work …..
First, Let’s see how this silder should work : it can be a slide or fadein , fadeout by config ; can be silde or fade automatically when page load by config;the most important thing i want is when user click one of the item it can hold on the selected item for a longer time in order to make sure the user have enough time to read the content .
Options
var defaults = { mode: 'slide', speed: 500, auto: false, pause: 3000, select:10000, width: $(this).children('.silderitem').width(), wrapper_class: 'container' };
Mode : value can be ‘slide’ or ‘fade’ , that’s define how the silder work.
Speed : Integer which define the fade or slide speed.The Larger values more slowly.
Auto : valid value is true or false , true means start fade or slide automatically when page load.
Pause : Integer define the interval of the slide or fade . Larger values longer time.
Select : Integer ,define the interval when click of the item , so the user have enough time to read the content .If set value 0, it will break the auto slide/fade after click .
Width : the slide or fade item width , aways it can get automatically .
wrapper_class : the css class name of the items wrapper which include all the slide or fade items.
Only for version 2.1.0
Loop : when true the the slider will reverse to the first one auto.
height : set the slider content height
the new version(2.1.0) also support muti-slider/fade in a page. .
How to use ?
HTML Codes:
<div id='sildercontent'> <div class='silderitem'>silder content 1</div> <div class='silderitem'>silder content 2</div> <div class='silderitem'>silder content 3</div> <div class='silderitem'>silder content 4</div> <div class='silderitem'>silder content 5</div> </div> <ul id='slnav'> <li class='active'>item1</li> <li >item2</li> <li >item3</li> <li >item4</li> <li >item5</li> </ul>
JAVASCRIPT Codes:
<script type="text/javascript" language="javascript" src="jquery.js" ></script> <script type="text/javascript" language="javascript" src="jquery.suSlider.js" ></script> <script type="text/javascript" language="javascript" > $(document).ready(function(){ $('#sildercontent').suSlider(); }); </script>
Example
Online demo : jquery content silder jquery content fade
Download Soure Codes & Example
jqurey content slider / jquery content fade plugin
Update
Latest Version jqurey-content-slider-2.1.0.zip (Include demo )
, I'm a freelancer and available now,if need help just contact me without hesitation.
19 Responses to “nice jquery content slider”
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)
After reading you blog, I thought your articles is great! I am very like your articles and I am very interested in the field of Free trial. Your blog is very useful for me .I bookmarked your blog! I trust you will behave better from now on; I hope she understands that she cannot exepct a raise.
After reading you blog, Your blog is very useful for me .I bookmarked your blog!
Wishes your valentine day to be joyful!
Superb! Thanks so much for this. Hope you’re happy for me to use it
This is far better than using SWFs which take ages to load. I’ll be sending a donation now!! Great work 
Rachelle
Just feel free to use,very glad you like it ! Thanks for your donation . That’s the emotion of my work .
Great thank you
I’m going to have a look at your other work now… very impressed with this file 
Wow .. Nice Plugin.
The download link is not working. Can you please fix it ?. Can you help me, how to avoid on the reverse move once all the slides completed. is it possible to add the option to rotate from the begining.. instead of reverse travel
thanks for you notice.i fix the download link.ok,please take notice for my site.i will update it shortly , thanks for your advise.this new function will be add in the new version as well as muti-slider in one page
I have to say, every time I come to http://www.brightyoursite.com you have another interesting article up. One of my friends was telling me about this topic a couple weeks ago. I think I’ll send my friend the link here and see what they say.
Great post! I like the blog!
This have to be the best site ever.
Great article Thank
you so much!
Great article, i
hope can know much information About it!
i like this scripts and also super slider
glad you like it, i’m developing other pluins and tools ,just take care of my site
You commit an error. Write to me in PM, we will communicate.
Hi,
The script doesnt work in IE7? Can you verify this?
I have it working in IE8, FF3.5 and Safari, but getting errors in IE7.
Thanks.
hi i aready find the problem it’s beacuse the js array problem.i need remove a ‘,’ , updated the file in the zip ,it’s ok now
Thank you for a wonderful slider.
Is there any way to make it not slide automatically?
Thanks
Andy
yes its easy just config the auto to false , plz check the config information