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.
33 Responses to “nice jquery content slider”
Leave a Reply
-
Search for:
Categories
- apache (2)
- css xhtml (10)
- google api (2)
- html5 (1)
- javascript (3)
- jquery (5)
- magento (3)
- mysql (1)
- php (4)
- 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
hi,
great stuff. is there a way to pause the slide, when mouse is over? Thanks
Hi,
lovely Script
It is possible to stop the animation when mouse rolls over? this would make this skript perfect
yes nice idea,thanks,but current version don’t have such a function.you need do some customize
Awful post. I have revealed for myself precisely how flexible WP is, as a hosting political program for your site. you literally have everything you need to release a website at your fingertips, through WordPress. thanks.
Nice Slider! One thing I was thinking in this…if I put it on Fade-mode and want the content to change in 5 seconds, the FADE takes that 5 seconds. Is it possible to get the fade going faster and the content pause for that 5 seconds so that fade-effect doesn’t bother the visibility of the content?
not understand clearly what’s you means, plz email me your problem, i will fix it for you when free
Can you give me your email address. There is something I would like
http://www.brightyoursite.com/contact.html
nice one but how can i implement this script more than once on my web page
Hi… great slider, but i found a little bug. when i click twice on one link, the content fades off. only when i set it to fade. the effect is in your demo too. what can i do?
I can not make this work with Drupal 6.
its not system problem you didnt install it correctly
What about stop the animation when mouse rolls over?
just set the select to a large number