Winnipeg Web Design
a winnipeg website design company.
a winnipeg website design company.
There are a ton of tutorials already out there about creating content sliders with jQuery.
So why bother writing another one? While I don’t think that the existing tutorials are
incorrect, bad, or otherwise unacceptable, I haven’t found one that met my needs.
With my attempt at a content slider, I’m hoping to accomplish the following:
View the Demo
Get the Source Code On GitHub
Let’s start with the HTML we’ll base our jQuery around. We’ll start with a <div> to hold
the content slider, which we’ll give a class attribute of “contentslider”. Inside that, we need
two more <div> elements with class “cs_wrapper” and
“cs_slider”—these will hold all of the entries and allow for the content to move
left and right.
<div id="contentslider"> <div class="cs_wrapper"> <div class="cs_slider"> <!-- Content goes here --> </div><!-- End cs_slider --> </div><!-- End cs_wrapper --> </div><!-- End contentslider -->
To hold our article entries, we create another <div> element with class “cs_article”.
Inside each instance of cs_article, we’ll have a heading, an image, and a description, along with a link to read
the full entry. When all is said and done, each entry looks like this:
<div class="cs_article"> <h2> <a href="#">Article Number One</a> </h2> <a href="#"> <img src="images/article01.jpg" alt="Artist's interpretation of article headline" /> </a> <p> Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi. Vel dolore soluta qui odio non. Sollemnes minim eorum feugiat nihil nobis. Gothica dolor in legentis nihil quinta. </p> <p> Iriure parum autem putamus lectores duis. Quam sit quis me me zzril. Facer etiam in lectores hendrerit etiam. Exerci lorem liber tincidunt nostrud decima. Mutationem est zzril ipsum facer nobis. </p> <a href="#" class="readmore">Read More</a> </div><!-- End cs_article -->
Using this format, we’re able to add as many entries to the slider as we feel necessary.
To get our slider to function properly, we have to apply some styles to it. We’re going to use
a non-standard format in order to make customizing the CSS as easy as possible. Because the
JavaScript we’re going to write will control some of the styles, we’re going to split our CSS
into two sections: editable styles and non-editable styles.
First, let’s define our non-editable styles:
.contentslider {
position:relative;
display:block;
width:900px;
height:400px;
margin:0 auto;
overflow:hidden;
}
.cs_wrapper {
position:relative;
display:block;
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
.cs_slider {
position:absolute;
width:10000px;
height:100%;
margin:0;
padding:0;
}
.cs_article {
float:left;
position:relative;
top:0;
left:0;
display:block;
width:900px;
height:400px;
margin:0 auto;
padding:0;
}
Above, we define the default size of the content slider and center it. Then, we
hide any overflow of the “cs_wrapper” and stretch the “cs_slider horizontally
to contain all of the entries. Finally, we set the “cs_article” class to float
left, allowing them to tile horizontally.
With the container elements set up properly, we can now style the inside of the
article container. We need to set up styles for our headline, image, description,
and “Read More” link.
.cs_article h2 {
display:block;
width:26%;
margin:10px 26px 5px 67%;
text-align:left;
}
.cs_article img {
position:absolute;
top:0;
left:0;
width:66%;
border:0;
-ms-interpolation-mode:bicubic;
}
.cs_article p {
display:block;
width:26%;
margin:0 26px 5px 67%;
padding:0;
border:0;
}
.cs_article .readmore {
display:block;
width:26%;
margin:0 26px 0 67%;
text-align:right;
}
Notice that width is defined with percentages, as is the right margin.
By doing so, we allow for the container to resize without losing the proportions
of our styles.
To round out our non-editable styles, we’ll define our buttons:
.cs_leftBtn, .cs_rightBtn {
position:absolute;
top:0;
height:400px;
padding:10px 0;
z-index:10000;
}
.cs_leftBtn {
left:0;
outline:0;
}
.cs_rightBtn {
right:0;
outline:0;
}
.cs_leftBtn img, .cs_rightBtn img {
border:0;
position:relative;
top:200px;
margin:0;
}
We set the z-index of the buttons to 10000 to prevent them from sitting
under the article previews, and then we remove the outline from clicked links.
To reduce the amount of markup necessary to achieve our desired effects, note
that we’ve declared our <a> tag as a block-level element.
Our editable styles are all fairly simple, and deal mostly with the colors and
fonts of our display.
.contentslider {
padding:10px; /* This acts as a border for the content slider */
background:#333; /* This is the color of said border */
}
.cs_wrapper, .cs_article {
background:#FFF; /* Background color for the entries */
}
.cs_leftBtn, .cs_rightBtn {
width:30px; /* Should be as wide as the button graphic being used */
background:#333; /* This will probably match the contentslider bg color */
}
.cs_article h2 {
font-size:200%;
line-height:1.125em;
}
.cs_article h2 a {
color:#333;
text-decoration:none;
}
.cs_article p {
font-size:85%;
line-height:1.5em;
color:#777;
}
.cs_article .readmore {
font-size:80%;
}
As indicated by the comments above, we’re using the padding on contentslider
as a border. This made more sense when considering the absolute positioning of
the buttons, because otherwise negative values would have been necessary, and that
complicates things unnecessarily.
Any properties can be added above, but keep in mind that box model tweaks may be
overwritten by the non-editable CSS (located lower in the stylesheet) or by the
jQuery plugin.
With our styles in place, the markup should look a little more presentable. Also,
because the buttons are added by the jQuery plugin, the slider degrades gracefully,
becoming a display box for just the first article.
With the slider styled and marked up properly, we can start adding jQuery effects!
(function($) {
$.fn.ContentSlider = function(options)
{
var defaults = {
leftBtn : 'images/cs_leftImg.jpg',
rightBtn : 'images/cs_rightImg.jpg',
width : '900px',
height : '400px',
speed : 400,
easing : 'easeOutQuad',
textResize : false,
IE_h2 : '26px',
IE_p : '11px'
}
// Declare variables here
// Process the content slider here
})(jQuery)
Our first task is to set up the plugin and declare default values. For this
plugin, we’ll allow the user to customize the images used for the buttons, the
width and height of the content slider, the animation speed, the easing formula,
whether or not the text will be resized by the plugin, and, because Internet
Explorer doesn’t seem to play nice with font-size, IE-specific font
sizes for the article heading and description.
Next we have to extend the default values with those supplied by the user, and
then we declare a handful of variables that will be used by the plugin:
var defaultWidth = defaults.width;
var o = $.extend(defaults, options); // Extend the defaults with user-defined values
var w = parseInt(o.width); // Removes the 'px' from the width option
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth); // Percentage of default size
var thisInstance = this.attr('id'); // The id of the content slider
var inuse = false; // Prevents colliding animations
The variables declared above may not make much sense right now, but we’ll get
to them in just a second.
Our next step is to cycle through all matched elements and make our content slider
interactive. We do this using the .each() method. First, we set the
width and height of the content slider and add the buttons:
return this.each(function() {
$(this)
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
// Add the buttons to move left and right
.prepend('<a href="#" class="cs_leftBtn"><img src="'+o.leftBtn+'" /></a>')
.append('<a href="#" class="cs_rightBtn"><img src="'+o.rightBtn+'" /></a>')
Next, we need to set the article div to be the same size as the content slider.
// Dig down to the article div elements
.find('.cs_article')
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
.end()
Finally, we set the opacity of the left button to zero, then hide the right
button and animate its entrance for a little bit of added style.
// Animate the entrance of the buttons
.find('.cs_leftBtn')
.css('opacity','0')
.end()
.find('.cs_rightBtn')
.hide()
.animate({ 'width':'show' });
With our buttons in place and the content slider properly sized, we now need
to resize the text (if the textResize flag is set to true).
First, we determine the current size of the text in the content slider and
store it in variables (h2FontSize and pFontSize)—or,
in the case of Internet Explorer, we just set the variables based on the
options passed at the creation of the plugin—and then set the new
size based on the product of our variables and the p variable set
above, which is the size in percent of the content slider after being resized.
// Resize the font to match the bounding box
if(o.textResize===true) {
var h2FontSize = $(this).find('h2').css('font-size');
var pFontSize = $(this).find('p').css('font-size');
$.each(jQuery.browser, function(i) {
if($.browser.msie) {
h2FontSize = o.IE_h2;
pFontSize = o.IE_p;
}
});
$(this).find('h2').css({ 'font-size' : parseFloat(h2FontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('p').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
$(this).find('.readmore').css({ 'font-size' : parseFloat(pFontSize)*p+'px', 'margin-left' : '66%' });
}
Next, we have to tell the buttons what to do when they’re pressed. To keep
the code as concise as possible, we’re going to move the slider with a
function called moveSlider.
First, we store the button in a variable, and then bind an event to it that
fires on the “click” event. The click will set the inuse variable to
true, which will prevent multiple clicks from causing erratic behavior in the
slider, then fires the moveSlider function.
We repeat this for the right button, and finally run a quick function to
vertically center the buttons. Then we close our .each() call.
// Store a copy of the button in a variable to pass to moveSlider()
var leftBtn = $(this).children('.cs_leftBtn');
leftBtn.bind('click', function() {
if(inuse===false) {
inuse = true;
moveSlider('right', leftBtn);
}
return false; // Keep the link from firing
});
// Store a copy of the button in a variable to pass to moveSlider()
var rightBtn = $(this).children('.cs_rightBtn');
rightBtn.bind('click', function() {
if(inuse===false) {
inuse=true;
moveSlider('left', rightBtn);
}
return false; // Keep the link from firing
});
vCenterBtns($(this)); // This is a CSS fix function.
});
We now need to define the moveSlider function.
First, we determine the current left value of the “cs_slider” div,
setting it to zero if no value is currently set. Next, we determine how far the
div needs to move by either adding or subtracting the width of the content
slider, depending on which direction we’re moving.
function moveSlider(d, b)
{
var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
if(isNaN(l)) {
var l = 0;
}
var m = (d=='left') ? l-w : l+w;
Next, we have to make sure the new left value is within the minimum and
maximum constraints, which prevent the content slider from sliding out of
view. If the new left value is within our constraints, we animate the
movement from the current value to the the value.
if(m< =0&amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;m>=x) {
b
.siblings('.cs_wrapper')
.children('.cs_slider')
.animate({ 'left':m+'px' }, o.speed, o.easing, function() {
inuse=false;
});
To wrap up this function, we want to hide the button if the slider can no
longer move in that direction. In order to do this, we have to first save the
buttons into variables (thisBtn and thatBtn).
if(b.attr('class')=='cs_leftBtn') {
var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
} else {
var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
}
Next, if the minimum or maximum left value has been reached, we fade out the
button that moves in that direction. Also, we check if the opposite button
from the one clicked is faded out, and fade it back in if so.
if(m==0||m==x) {
thisBtn.animate({ 'opacity':'0' }, { duration:o.speed, easing:o.easing });
}
if(otherBtn.css('opacity')=='0') {
otherBtn.animate({ 'opacity':'1' }, { duration:o.speed, easing:o.easing });
}
}
}
Our last step is to define the vCenterBtns function.
This function simply divides the plugin-defined height of the content slider and
divides it in half, then sets that as the top value of the button image.
function vCenterBtns(b)
{
// Safari and IE don't seem to like the CSS used to vertically center
// the buttons, so we'll force it with this function
var mid = parseInt(o.height)/2;
b
.find('.cs_leftBtn img').css({ 'top':mid+'px', 'padding':0 }).end()
.find('.cs_rightBtn img').css({ 'top':mid+'px', 'padding':0 });
}
With our jQuery in place, we now have a fully functional content slider!
Finally, to use the plugin, simply call the following:
<script type="text/javascript">
$('.contentslider').ContentSlider();
</script>
Any of the default options can be altered by simply passing a JSON object as
a parameter the ContentSlider():
<script type="text/javascript">
$('.contentslider').ContentSlider({
leftBtn: 'images/newLeftButton.jpg',
rightBtn: 'images/newRightButton.jpg',
width : '600px',
height : '240px',
speed : 600,
easing : 'easeInOutBack',
textResize : true,
IE_h2 : '30px',
IE_p : '14px'
});
</script>
As you can see in the demo,
this plugin supports multiple instances of itself, so if you feel the urge, you
could potentially put a thousand of these suckers on a page without incident.
As far as I can tell, this is supported by Firefox, Safari, Opera, and IE6+. Be
sure to point it out in the comments if you find browser bugs.
I attempted to keep all the cosmetic styling of the content slider accessible,
allowing for total customization of the plugin. If you spot a bug, have any
trouble with installation, or (preferred) you want to talk about how wonderful
you found this plugin, don’t hesitate to drop a comment below or
email me.
Printing brochures has never been this affordable and easy! With an integrated design tool on the site, we revolutionize the business card printing world.
Alan Says:
Fyi, there’s a bug that I’m seeing under firefox 3.0.8 under XP: Click the “next button” to get to the last element. Click the, now hidden, next button again. The “previous button” no longer works.
jiggy boo Says:
IE 7 – back link does not work
teh Says:
how to break it.
step 1: click the box where the ‘back’ arrow would otherwise be if it were not hidden
step 2: it is now broken
teh Says:
alternative way to break it:
step 1: click the next arrow till you’re at the last slide
step 2: click again in the same location
step 3: ok, it’s broken
Andrew Says:
The z-index of 10000 is way to excessive… it will up on top of things it shouldn’t.
Jason Lengstorf Says:
Hey, guys, thanks for pointing out the bug!
I patched the problem in the demo (it should be working fine now), and I’ll send Brenelz updated source code.
If you want to manually patch the problem, in the moveSlider() function, add a callback function to the fadeout animation:
function() { thisBtn.hide(); }
This prevents the button from being clicked again.
Then, below, chain in the show() method to make the item clickable again:
otherBtn.show().animate({ … });
@Andrew:
In regards to the z-index, I assumed the buttons wouldn’t be sitting under anything else on the page. But you’re right, a simple z-index of 5 would have been sufficient.
Thanks again!
Brenley Dueck Says:
Source code has been updated with fixes
wil waldon Says:
Is there any chance you are working on WordPress integration?
Bill Bolmeier Says:
Very nice.
Jason Lengstorf Says:
@wil waldon:
Generally, I don’t work with WordPress, but just for kicks I might try it out. I haven’t built a WP plugin in about a year, so it could completely fail. 
I’ll end up posting it on my blog if I figure it out.
shane sponagle Says:
This is great. Thanks.
wil waldon Says:
@Jason. I think the community would LOVE this plugin if you got it up and running. I for one am trying to integrate posts into your slider this week, I’ll stop by and tell you if I succeed.
It doesn’t seem like it would be super hard, just time consuming and will take a bunch of research
[...] Here’s a good tutorial on building a slider with jQuery. [...]
Meshach Says:
Nice!
jack Says:
wonderful article, also shows the power of JQuery
[...] Build a Content Slider with jQuery :: Brenelz’s Web Development Tips :: Website Design Winnipe… – (More…) [...]
Mike Says:
Awesome tutorial! Makes it extremely simple for someone just beginning to dabble in jQuery.
I was curious, is it possible to do something similar to this using site links, as opposed to next and previous buttons?
For example, I’d like to implement my different pages such as ‘Home’ and ‘Links’ as links that slide to a particular div with the same id. Is something like this possible?
Thanks!
[...] del.icio.us How to Use Photoshop Gradients Plus 600+ Gradients Build a Content Slider with jQuery :: Brenelz’s 44 Must Learn Web Design Layout Tutorials in Selective JPEG compression in Photoshop Web [...]
Jason Lengstorf Says:
@Mike:
You could definitely modify this plugin to respond to links on your site.
If you read the menu in as an array, then your first option would be index 0 (i.e. menu[0]). You could use the page width and have the left value set to the page width times the menu index. So if the page width is 960, and you click menu index 1, the left value is set to 960.
Does that make sense?
The changes would be fairly small to accomplish that, actually. Give it a whirl and get hold of me on Twitter if you get stuck.
Jimbob Says:
Hey there, this is great. Thanks for the indepth article. I have a similar question to mike. i dont want it to respond to links on my page – all i want to do is pull the next and previous buttons out and put them where i please on the page.
My new site design has two tabs hanging off the side of the page which are the next and previous buttons, but with this and most other sliders out there (except jflow) i am stuck with having the next and previous buttons attatched programtically either side of the slides.
Ive done this with JFlow but IE6 doesnt seem to like it. Im note very good with code but I can follow it, just cant write the stuff. how easy is this to do with you have already? Good job on the article btw. Thanks
jeroen Says:
I am looking at different sliders on the web, and found some that are a bit easier to implement. But that one uses a list… meaning I can’t put a div in there!
Just one question, it would be great if the prev/next buttons would be always there and would jump to the last/first one.
Please mail me on how to do this:D
Jason Lengstorf Says:
@Jimbob:
To pull the buttons out of the slider, all you’d have to do is remove the part of the .each() loop that creates the buttons:
// Add the buttons to move left and right
.prepend(‘‘)
.append(‘‘)
Then keep the code from hiding and animating the buttons by removing these lines:
.end()
// Animate the entrance of the buttons
.find(‘.cs_leftBtn’)
.css(‘opacity’,’0′)
.end()
.find(‘.cs_rightBtn’)
.hide()
.animate({ ‘width’:'show’ });
(Remember to add a semicolon to the end of the chain to avoid an error)
The last step would be to remove the requirement for the buttons to be children of the slider div. Change these lines:
var leftBtn = $(this).children(‘.cs_leftBtn’);
and
var rightBtn = $(this).children(‘.cs_rightBtn’);
To be a general search:
var leftBtn = $(‘.cs_leftBtn’);
var rightBtn = $(‘.cs_leftBtn’);
Then, so long as you label the two buttons on your page with class=”cs_leftBtn” and class=”cs_rightBtn”, everything should work fine.
Keep in mind only one instance of the content slider will be able to exist with the above modifications.
@jeroen:
Jumping to the first and last entry would involve creating a button that set the “left” value of the slider to the minimum and maximum values, respectively.
The minimum and maximum values are determined in the moveSlider() function, so you can lift the equation out of there.
Then, you’d just need to create two buttons labeled, for instance, class=”first” and class=”last”.
Bind a function to them that checks the class attribute of the clicked button and goes to the first or last entry depending on the button clicked:
bind(‘click’, function() {
inuse=true;
if($(this).attr(“class”)==”first”) {
$(‘.cs_slider’).animate({ ‘left’ : min+’px’ }, o.speed, o.easing, function() { inuse=false });
} else if($(this).attr(“class”)==”last”) {
$(‘.cs_slider’).animate({ ‘left’ : max+’px’ }, o.speed, o.easing, function() { inuse=false });
}
});
I didn’t test any of the above code, so forgive me if it’s buggy. That should get you started, though.
Good luck! Post the results here if you implement the slider!
Jimbob Says:
@Jason Lengstorf.
Awesome, thanks for the reply. Whilst I was waiting for a reply (heck of a time difference there btw! im in the UK.) I actually managed to fix the IE6 problem i had with jFlow. However, i do prefer your slider so i may swtich. Im sure your response will be very useful to others too. Maybe in the next version (if you plan on improving it) it might be wise to add an option to disable the auto generated next/previous buttons and use a public err..function? (sorry, little rusty on programming terms, please dont laugh.)…this i assume would allow custom button placement and mulitple slider instances. Anyway, something to think about, thanks alot.
[...] Build a Content Slider with jQuery [...]
Waqas Says:
Can we add some auto sliding function in it.
[...] Build a Content Slider with jQuery A cool Jquery content slider to add to your site. [...]
[...] A jQuery content slider tutorial [...]
Meshach Says:
Nice stuff!
b00m Says:
This is great, no pain implementing in wordpress but I have notice if your using FF the slide animation is not smooth and if your using IE 6 or 7 the slide animation is smooth.
Anyway TNX for this tut.
Jo Says:
Hi Jason thank you for the great post.
Most sliders work only for images and i’m looking for one that can handle text so this is really helpfull.
But I’m gonna second some requests here.
- autoslider function
- continuous sliding so that when i keep clicking next it just gets back to the first div
- wordpress plugin. I would like to put a certain category of wp posts into the slider at the top of my page. but i have no idea how to do it.
- keeping both arrow buttons visible at all times but you already answered that one.
sorry for all the requests. But i guess that is what happens when you make a good product
Frank Says:
Here’s a marvel idea, post a publishing date at the top of your article!
Nice thanks Jason Says:
Hey this scroller is great! Thanks for sharing it.
I’d like to embed a youtube video in it, but in Firefox 3.0.8, it is not hidden as it scrolls.
In IE 7.0.6, the video just shows up as a missing image (The box with a red x in it)
Any suggestions?
carolina Says:
i am trying to always position the buttons at the top instead of the middle. I tried changing
.find(‘.cs_leftBtn img’).css({ ‘top’:mid+’px’, ‘padding’:0 }).end()
.find(‘.cs_rightBtn img’).css({ ‘top’:mid+’px’, ‘padding’:0 });
so that mid = top but on IE6 and 7 its breaking the whole thing.. Is there a way to do this without modifying the css?
[...] 8. Content Slider [...]
Ankit Sabharwal Says:
Hi Jason
Great post ! you made the task a lot easier.
thanks
Kevin Says:
How can I get this to auto-rotate the content?
I was thinking I’d use setInterval(‘moveSlider(“right”, leftBtn);’, 2000);
kuldeep Says:
this code has bug-”object expected!” in ie-6,ie-7
[...] Visit original site to get instructed about this feature. Build a Content Slider with jQuery Web Design Content Slider, Content Slider with jQuery [...]
hnns Says:
hi. great slider!! cheers. any idea how to include an automatic timed slide?
that’d be great
matthew Says:
Thanks for this!
Ty Says:
Seconding wil waldon – I would love a wordpress tutorial. 
for adding this to my wordpress
I’m trying to liven up my page. Maybe a referral to a pre-existing slider tutorial
Every little bit helps
Paul Says:
Is there an option to slide vertically? and can one change the position of the prev and next buttons? i.e. put them under the slide container?
Sbudah Says:
Probably not the best way to get the autoplay/slide but I achieved it by adding the following code after the $(‘item’).ContentSlider({options}) code:(someone please advise on best way to do it)
$autoslide = setInterval(function(){
$leftD = $(‘.cs_leftBtn’).css(‘display’);
$rightD = $(‘.cs_rightBtn’).css(‘display’);
// get direction based on last item/button to be made invisible
if($leftD == ‘none’){
$dir = ‘goRight’;
}
if($rightD == ‘none’){
$dir = ‘goLeft’;
}
// set button to click
($dir == ‘goRight’) ? $curButt=’.cs_rightBtn’ : $curButt=’.cs_leftBtn’;
$($curButt).trigger(‘click’);
}, 3000);
[...] Build a Content Slider with jQuery – a tutorial by Jason Lengstorf from Ennui Design [...]
Corey Watson Says:
Is it possible to get a slide indicator that says how many slides there are and which slide you are on? Like gray dots below the slider that turn black when you’re on a slide.
Also, I’d like to second the request for auto sliding. In addition, a play and pause button to turn the auto sliding on and off would be perfect.
First slider I’ve ever used and love it!
Corey Says:
Is it possible to get a slide indicator that says how many slides there are and which slide you are on? Like gray dots below the slider that turn black when you’re on a slide.
Also, I’d like to second the request for auto sliding. In addition, a play and pause button to turn the auto sliding on and off would be perfect.
First slider I’ve ever used and love it!
[...] Build a Content Slider with jQuery :: Brenelz’s Web Development Tips [...]
Humberto Says:
How long have you been blogging…your good at it.
September 11th, 2009 at 1:20 am
[...] Build a Content Slider with jQuery There are a ton of tutorials already out there about creating content sliders with jQuery.So why bother writing another one? While I don’t think that the existing tutorials areincorrect, bad, or otherwise unacceptable, I haven’t found one that met my needs. [...]
William Says:
September 15th, 2009 at 9:38 pm
Hey, would it be super hard to add clickable thumbnails below a slide show, to slide to the corresponding slide when clicked?
October 11th, 2009 at 11:42 pm
[...] Build a Content Slider with jQuery [...]
Shahriar Hyder Says:
October 12th, 2009 at 12:29 am
Nice one mate. I have also added the link to your post in my Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance. Have a check below:
Lyle Says:
Great slider,
I was curious how you can set a background image for each article? I tried to by giving .cs_article a background image, but the slides would not advance after that.
I’m very new to jQuery and am grateful for this great post!
Thank you in advance.
Djavan Says:
November 17th, 2009 at 12:26 pm
1) The link to the source code doesnt work
2)when I made mine, for some reason it starts on slide 3 instead of 1, any ideas?
Djavan Says:
November 17th, 2009 at 7:46 pm
nvm I was able to fix it by changing:
to
December 28th, 2009 at 9:08 pm
[...] Build a Content Slider with jQuery [...]
Dups Says:
December 29th, 2009 at 5:10 am
Good Content slider, better if you can add some extra configurations like auto slideshow
Skiff Says:
December 30th, 2009 at 11:26 pm
Another example of Jason Lengstorf’s exceptional coding.
anna Says:
Thanks for this great tutorial – exactly what I’ve been looking for! I have come across a strange problem though – when I add more then 12 elements, the slider stops displaying the content of 13th, 14th (etc) div. It recognizes the number of items correctly (displaying the prev and next buttons until the last one), but doesn’t display anything past item 12. I haven’t modified the code in any way, simply added additional elements. Could you help please?
It would be greatly appreciated.
Steve Says:
Hi guys,
I’m from Germany and I have a big problem. I want to implement this great stuff but it does not work 
I don’t see the next oder previous arrows, there isn’t any kind of animation?!
Please help me…
Morgan Says:
@anna
The .cs_slider width is set to 10000px by default. Depending on the width of your .cs_articles, you would need to expand the width of that element.
Cfyele Daen Says:
February 22nd, 2010 at 3:14 pm
Grate, very good work. I have tested it and it works fine.
I am just wondering how can let the slider from left to right instead of right to left ? I have made different modification but all of them failed.
Can you please help me to move the slider from left to right instead of the default one right to left?
Regards
sam s Says:
hi jason,
first of all, brilliant content slider, very useful and subtle design.
thank you for that.
but now here is the problem, I have got 16 images (cs_articles) in one slider, everything fine, but the last three pictures are blank for some reason, even though there should be pictures.
Is there a limit to how many pictures you can add to one slider?
Was trying to figure it out since yesterday night, getting desperate now to fix this, which is why I contact you.
Any help would be muuuchhh appreciated.
Thank you in advance.
Regards.
gladys Says:
hi. I having problem with getting my images to show pass the third slide. How can I fix it ?
Thank you in advance.^^
zerg Says:
hi im having problem making it dynamic trough json request…
Ondine Says:
Hi,
first, thanks for the tutorial.
I’m having a problem with the step three, the slider won’t work, i don’t see the previous and next button.
I put all the javascript code in the jquery file. And i don’t really understand the codes so i don’t know where i’m wrong, pleaase will you help me
the page is http://b0rdelique.free.fr/portfolio.php
Luis Says:
Thanks for the tutorial. Great!
Is there a problem with more then 10 contents to be shown?
chicago web development Says:
I hope all of these techniques work out, as I definitely need multiple instances on my page.
Rob Anderson Says:
Thanks so much for this plugin and tutorial!
Jörg Says:
Great plugin! Works for me.
Is there an easy way to generate a link-bar like “article: 1 2 3 4 5″ and go directly to one of the cs_article divs ? I’m not able to evaluate time and effort for that
Thanks in advance and greetings from germany
Jorge Says:
Is there a way to instead of fading the buttons you can just replace the images with another? lets say i want an off button graphic kinda deal instead of disapearing it
Richey Says:
A real great slider! Thank you 
[...] 21.Build a Content Slider with jQuery [...]
Lora Says:
I love the way this slider looks on my site, but it doesn’t completely work on my site. The images work great and slide perfectly, but the text/articles do not show up. Can you see a reason why this doesn’t work on my site? I’ve checked and rechecked and I can’t seem to figure out why the images work while the acticles themselves are not being displayed.
Lora Says:
Nevermind! I figured it out!
[...] Build a Content Slider with jQuery [...]
[...] Build a Content Slider with jQuery | Brenelz Web Design Solutions (tags: jquery jquery-plugins slider) [...]
[...] Build a Content Slider with jQuery [...]
Mack Says:
I’m a bit dumb at coding, did anyone figure out who to make the slider continuous, and return to the first slide at the end?
[...] the article is mainly focused on how to incorporate this slider into WordPress I will not be going into a lot of detail regarding the CSS and Jquery. Please read [...]
e11world Says:
Very useful and easy to implement. I guess I might as well put in the request for an auto switch feature to this to improve it even more. It’s still SOLID though. Nice work!
Suwicha P. Says:
This code can use a link that directly change a page of content such as:
Go to page 5
rel=”5″ is means page 6 when you counting
(function($) {
$.fn.ContentSlider = function(options)
{
var defaults = {
leftBtn : '/contentslider/images/previous.png',
rightBtn : '/contentslider/images/next.png',
width : '900px',
height : '400px',
speed : 400,
easing : 'easeOutQuad',
textResize : false,
IE_h2 : '26px',
IE_p : '11px'
}
var defaultWidth = defaults.width;
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var n = this.children('.cs_wrapper').children('.cs_slider').children('.cs_article').length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth);
var thisInstance = this.attr('id');
var inuse = false; // Prevents colliding animations
var currentposition = 0;
function moveSlider(d, b, step)
{
var l = parseInt(b.siblings('.cs_wrapper').children('.cs_slider').css('left'));
if(isNaN(l)) {
var l = 0;
}
var m = 0;
if (isNaN(step))
{
m = (d=='left') ? l-w : l+w;
currentposition = Math.abs(m / w);
}
else
{
m = step*(w*-1);
currentposition = step;
}
if(m=x) {
b
.siblings('.cs_wrapper')
.children('.cs_slider')
.animate({
'left':m+'px'
}, o.speed, o.easing, function() {
inuse=false;
});
if(b.attr('class')=='cs_leftBtn') {
var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
} else {
var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
}
if(m==0||m==x) {
thisBtn.animate({
'opacity':'0'
}, o.speed, o.easing, function() {
thisBtn.hide();
});
}
if(otherBtn.css('opacity')=='0') {
otherBtn.show().animate({
'opacity':'1'
}, {
duration:o.speed,
easing:o.easing
});
}
}
}
function vCenterBtns(b)
{
// Safari and IE don't seem to like the CSS used to vertically center
// the buttons, so we'll force it with this function
var mid = parseInt(o.height)/2;
b
.find('.cs_leftBtn img').css({
'top':mid+'px',
'padding':0
}).end()
.find('.cs_rightBtn img').css({
'top':mid+'px',
'padding':0
});
}
return this.each(function() {
$(this)
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
// Add the buttons to move left and right
.prepend('')
.append('')
// Dig down to the article div elements
.find('.cs_article')
// Set the width and height of the div to the defined size
.css({
width:o.width,
height:o.height
})
.end()
// Animate the entrance of the buttons
.find('.cs_leftBtn')
.css('opacity','0')
.hide()
.end()
.find('.cs_rightBtn')
.hide()
.animate({
'width':'show'
});
// Resize the font to match the bounding box
if(o.textResize===true) {
var h2FontSize = $(this).find('h2').css('font-size');
var pFontSize = $(this).find('p').css('font-size');
$.each(jQuery.browser, function(i) {
if($.browser.msie) {
h2FontSize = o.IE_h2;
pFontSize = o.IE_p;
}
});
$(this).find('h2').css({
'font-size' : parseFloat(h2FontSize)*p+'px',
'margin-left' : '66%'
});
$(this).find('p').css({
'font-size' : parseFloat(pFontSize)*p+'px',
'margin-left' : '66%'
});
$(this).find('.readmore').css({
'font-size' : parseFloat(pFontSize)*p+'px',
'margin-left' : '66%'
});
}
// Store a copy of the button in a variable to pass to moveSlider()
var leftBtn = $(this).children('.cs_leftBtn');
leftBtn.bind('click', function() {
if(inuse===false) {
inuse = true;
moveSlider('right', leftBtn);
}
return false; // Keep the link from firing
});
// Store a copy of the button in a variable to pass to moveSlider()
var rightBtn = $(this).children('.cs_rightBtn');
rightBtn.bind('click', function() {
if(inuse===false) {
inuse=true;
moveSlider('left', rightBtn);
}
return false; // Keep the link from firing
});
$('.slider_menu').click(function(){
if (currentposition != n && currentposition != this.rel)
{
if(inuse===false) {
inuse=true;
if (currentposition < this.rel)
{
moveSlider('left', rightBtn, this.rel);
}
else
{
moveSlider('right', leftBtn, this.rel);
}
return false; // Keep the link from firing
}
}
});
vCenterBtns($(this)); // This is a CSS fix function.
});
}
})(jQuery)
Suwicha P. Says:
Oh I forgot something. The link should be
marcy Says:
This is really beautiful and a great tutorial! Thanks!
Mark Says:
Great code.. Would love to include a php contact form, tried without any luck.
Any idea why this won’t work?
Robert E. McItnosh Says:
Hi, I was wondering if there was a way to use static links to jump to the page you would like to go to?
[...] Build a Content Slider with jQuery [...]
Sassiewas Says:
Is it possible to let te animation start on the last div instead of the first?
I have two div’s but the second div has to be the start-div and the first div should stay at the left of the first div. Any suggestions?
shan Says:
Of course what I want to modify is what you say not to.:) This example is great but is far too big for what I need to fit into my 960 width (with nav on the left side) grid. Ive tried changing my dimensions to 600×350 and wish for a short description text to be under the image. Is there anything I should pay particular attention to if I want this to line up properly?
Thom Says:
Hm, what am I doing wrong? It works when I test it locally…
http://www.theblueroomonline.com/demo.html
September 13th, 2010 at 11:25 am
[...] all of the essays and am currently building sliders for viewing and clicking easy-ness using Jquery. It gives me a sense of badassery. Also, I’ve been printing each of the essays using Blurb [...]
Beldar Says:
September 22nd, 2010 at 8:38 am
Thanks for making this slider, it fits great in the site that I’m doing now… But, I have a doubt, there’s is a way to stop the autosliding on mouse over??
Taurian Says:
September 24th, 2010 at 9:38 pm
Is there any way to use text links to change the position. I’ve experimented with @Suwicha P’s code but haven’t had any luck. Can anyone help?
usman Says:
September 25th, 2010 at 2:43 am
Very beautiful jquery slider
Can anyone please tell me how to set slide 2 as default or landing slide instead of 1?
Ashley Says:
September 28th, 2010 at 9:11 am
Hello, I’m practicing implementing your contentslider, to use in future projects. I have it set up and all is working the way it should except that, the left button is not appearing. The only button I ever see is the right button. How do I fix this? Thanks!
Guil1 Says:
September 30th, 2010 at 10:29 am
hello
very nice feature
much apreciated
is there any way to center vertically pictures incase of different hights for images ?
many thanks
steph Says:
thankyou so much for this!
anre Says:
October 11th, 2010 at 11:50 pm
how to allways show prewiev button
Boon Says:
Nice. Have got this working.
Anyone no how i can make the transitions fade instead of slide on button press?
chumpy Says:
Did anyone figure out the slide limit issue. I too am experiences blank slides after 13.
Killing Hours Says:
November 10th, 2010 at 9:14 am
You wanted a pause feature… you’ve got it. Courtesy of Palbin @ ravenphpscripts.com
var autoslide = setInterval(headline_rotate, 8000);
$(“#one”).hover(function() {
clearInterval(autoslide);
}, function() {
autoslide = setInterval(headline_rotate, 8000);
});
function headline_rotate() {
$leftD = $(“.cs_leftBtn”).css(“display”);
$rightD = $(“.cs_rightBtn”).css(“display”);
if($leftD == “none”){
$dir = “goRight”;
}
if($rightD == “none”){
$dir = “goLeft”;
}
($dir == “goRight”) ? $curButt=”.cs_rightBtn” : $curButt=”.cs_leftBtn”;
$($curButt).trigger(“click”);
}
Dani Says:
November 11th, 2010 at 2:40 pm
Thie is what I was looking for. Thanks a lot!
Connie Says:
November 16th, 2010 at 7:17 am
at Ashley:
the left button appears only when there is image to back … so you have to advance first, when the 2nd image is loaded, the left button will appear
Scott Says:
November 17th, 2010 at 1:04 pm
@Killing Hours: Just curious, where in the code would insert the auto slide part? Sorry but I’m not very experienced with coding
Thanks in advance for your help
Pooja Says:
November 19th, 2010 at 8:10 pm
Jason, this is really owesome tutorial! loved it.
Just wondering that can you show the code how to implement with links? (Earlier question asked by Mike which is–> For example, I’d like to implement my different pages such as ‘Home’ and ‘Links’ as links that slide to a particular div with the same id. Is something like this possible?) I am trying to do the same.
I am student. Thanks in advance for your help!
Killing Hours Says:
November 23rd, 2010 at 2:14 pm
@scott… not sure what you mean. The tutorial already covers that but lacked a pause feature. The code Palbin contributed “ADDS” a pause feature for the slider. The code contributed only “extends” the functionality of the slider… it doesn’t replace anything.
So… to add this “pause” to the your slider… you follow the above tutorial… and “add” the code I provided just after the }); that comes after the “easing: “easeOutBack” but before the closing });
Hope that clears it up for you.
Ellipsis Says:
November 24th, 2010 at 9:36 am
This works great, however I’ve ran into one issue. If you have enough slide, say 20 at 580px, the animate function seems to not work correctly, is there an alternative to jquery’s animate? Thanks in advance
Rajbir Says:
November 25th, 2010 at 2:42 pm
Thanks for the great article.
I was looking for auto-slide functionality and found the comment by @Killing Hours.
Thanks @Killing Hours, Your solution works great for me.
-Rajbir
November 26th, 2010 at 11:40 am
[...] Build a Content Slider with jQuery [...]
[...] of all end the “content rewind” that most other content sliders suffer from.VISIT THE DEMO21.Build a Content Slider with jQueryVISIT THE DEMO22.CSS and jQuery-Crating an Image SliderWhen a holder is hovered over the top image [...]
Lou Says:
December 12th, 2010 at 11:44 am
“All Content © 2009 Ennui Design” may pose a problem for some who download your code.
Killing Hours Says:
December 12th, 2010 at 2:58 pm
@Rajbir
Glad it helped you out!
-KH
Ulf Says:
December 21st, 2010 at 8:25 am
Hey! Thanks alot for this tutorial!
Took a while to hack it for my purposes, but I really like your style of teaching.
Andrew Valish Says:
December 22nd, 2010 at 12:28 pm
I’m attempting to use this awesome tutorial and plug in, but can’t seem to figure out how to position the article title and text more to the left. Please take a look at the progress of where I’m at with this to better explain what I’m trying to do. I’d appreciate any help.
Thanks!
Andrew Valish Says:
December 22nd, 2010 at 12:55 pm
Disregard my previous comments. I believe to have figured it out. Thank you!
Jasper Says:
December 23rd, 2010 at 4:25 am
@Killing Hours I can’t figure out where to put the auto-slide code. Where in the js file should i add this?
Jasper Says:
December 23rd, 2010 at 4:49 am
Sorry, figured it out. But is there a way to make it continous?
December 26th, 2010 at 1:39 am
[...] 50. Build a Content Slider with jQuery [...]
mustapha Says:
thankyou so much for this
[...] Build a Content Slider with jQuery A tutorial that is a bit different than the rest: explains how to create an easy-to-implement content slider plugin, allowing multiple instances on a page, allowing users to customize the size, button images, etc. and finally, how to create valid markup: [...]
Jasper Says:
After the last slide it goes left again, is there a way to make it go right after the last slide?
function headline_rotate() {
$leftD = $(“.cs_leftBtn”).css(“display”);
$rightD = $(“.cs_rightBtn”).css(“display”);
if($leftD == “none”){
$dir = “goRight”;
}
if($rightD == “none”){
$dir = “goLeft”;
}
($dir == “goRight”) ? $curButt=”.cs_rightBtn” : $curButt=”.cs_leftBtn”;
$($curButt).trigger(“click”);
}
});
Cgbaran Says:
January 12th, 2011 at 11:12 am
Nice tutorial thanks
Jordan Says:
January 12th, 2011 at 11:17 pm
Love the slider! However, after the 10th slide the rest are blank.
I saw one other user had the same issue. Is there a way around this apparent limit?
Thanks!
Pino Says:
January 20th, 2011 at 11:06 am
It’s possible to start with a custom slide (for example start with slide 3…)
Thank you
[...] Build a Content Slider with jQuery [...]
Ray Says:
This is really good. Can this be extended to have a gotoPage method. So, I could make it scroll to any article using a JavaScript call. If so would someone give me a clue Of how I would do that? I’ve not used JQuery much so haven’t got a clue how to achieve this.
Ray Says:
@Pino, to be able to add more slides and stop the blank slide increase the width of cs_slider e.g.
.cs_slider {
height: 100%;
margin: 0;
padding: 0;
position: absolute;
width: 18000px;
}
Ray Says:
The last comment was targeted @jordan not @pino
Ray Says:
Got a gotoPage function working, I’m sure it code be coded better, but, it works for me.
function gotoPage(step)
{
var lb = $(".cs_leftBtn");
var rb = $(".cs_rightBtn");
var w = parseInt(570);
var m = 0;
if (isNaN(step)) {
m = (d=='left') ? l-w : l+w;
currentposition = Math.abs(m / w);
} else {
m = step*(w*-1);
currentposition = step;
}
lb.siblings('.cs_wrapper')
.children('.cs_slider')
.animate({ 'left': m + 'px' }, 800, 'easeInOutBack', function() {
inuse=false;
});
if( step == 0)
lb.animate({ 'opacity':'0' }, 1000, 'easeOutQuad', function() { lb.hide(); });
else
lb.animate({ 'opacity':'1' }, 1000, 'easeOutQuad', function() { lb.show(); });
if(rb.css('opacity')=='0') {
rb.show().animate({ 'opacity':'1' }, { duration:800, easing:'easeOutQuad' });
}
}
To use you will need to alter the width (w) to match the width of your articals. Then to go to page 4 I simply call gotoPage(4).
neha Says:
January 30th, 2011 at 11:58 am
If I need to make it auto slide show then hw can I make it?
Is there any code to do it?
Please help
Thanks
yan Says:
February 1st, 2011 at 12:46 pm
very useful article.
can i implement a sub slider that will get trigger when i click on the Read more link? how ?
Jasper Says:
After the last slide it goes left again, is there a way to make it go right after the last slide?
function headline_rotate() {
$leftD = $(“.cs_leftBtn”).css(“display”);
$rightD = $(“.cs_rightBtn”).css(“display”);
if($leftD == “none”){
$dir = “goRight”;
}
if($rightD == “none”){
$dir = “goLeft”;
}
($dir == “goRight”) ? $curButt=”.cs_rightBtn” : $curButt=”.cs_leftBtn”;
$($curButt).trigger(“click”);
}
});
Mohammad Umer Says:
How can I use unlimited slides?
Moe Says:
Love the slider but it won’t let me use Lightbox within the slider… is there a fix for that?
Swarjit Says:
This is good slider, but I want a slider that weight less, I want this for my website & SEO Freelance project, could any body suggest me with a good link or article.
cebuano programmer Says:
thanks for this! …..
Maggie Says:
I am so lucky that I found this tutorial… This is just what I was looking for, since I’m building my website from scratch (I am a total begginer and have very little idea of Javascript). So here’s my question: I love the idea of having my content slide, but how could I add some tabs on top? What I mean by this is that I would like people to have the chance to go directly to the slide they want to see instead of having to scroll the slider until they get there. I’m not saying that I want to get rid of the left and right buttons, only to add the tabs on top, so they could either use the buttons or go directly to the slide they want to read.
I hope you can help me.
Thanks.
[...] In this tutorial, you will learn how to create a content slides with jQuery. Visit Site [...]
Belen Says:
I can only see 10 elements of the slider, from number 11 the slider still works but the elements don´t appear. How can I change this?
[...] Build a Content Slider with jQuery [...]
[...] Content Slider – Making a Content Slider with jQuery UI Making a Content Slider with jQuery UI – Build a Content Slider with jQuery Build a Content Slider with jQuery – Build a Simple Image Slideshow with jQuery Cycle Build a [...]
Dinesh Karki Says:
Awesome. M gonna use it in my upcoming projects.
[...] Build a content slider with jQuery [...]
[...] Build a content slider with jQuery [...]
[...] 41. Build a Content Slider with jQuery [...]
[...] 50. Build a Content Slider with jQuery [...]
shrimpsoup Says:
how to add, pagination.. like at page 1, page 2 ?
firederik Says:
Autosliding was solved.
i used both Killing Hours’s and Ray’s codes. Then i have add a little code more.
// Killing Hours’s code
var autoslide = setInterval(headline_rotate, 1000);
$(“#one”).hover(function() {
clearInterval(autoslide);
}, function() {
autoslide = setInterval(headline_rotate, 1000);
});
function headline_rotate() {
$leftD = $(“.cs_leftBtn”).css(“display”);
$rightD = $(“.cs_rightBtn”).css(“display”);
if($leftD == “none”){
$dir = “goRight”;
}
if($rightD == “none”){
//$dir = “goLeft”; //original code
$dir = “goRight”; // i have added
gotoPage(0); // i have added
inuse = true; // i have added
return false ; // i have added
}
($dir == “goRight”) ? $curButt=”.cs_rightBtn” : $curButt=”.cs_leftBtn”;
$($curButt).trigger(“click”);
}
// Ray’s code
function gotoPage(step)
{
var lb = $(“.cs_leftBtn”);
var rb = $(“.cs_rightBtn”);
var w = parseInt(570);
var m = 0;
if (isNaN(step)) {
m = (d==’left’) ? l-w : l+w;
currentposition = Math.abs(m / w);
} else {
m = step*(w*-1);
currentposition = step;
}
lb.siblings(‘.cs_wrapper’)
.children(‘.cs_slider’)
.animate({ ‘left’: m + ‘px’ }, 800, ‘easeInOutBack’, function() {
inuse=false;
});
if( step == 0)
lb.animate({ ‘opacity’:’0′ }, 10, ‘easeOutQuad’, function() { lb.hide(); });
else
lb.animate({ ‘opacity’:’1′ }, 10, ‘easeOutQuad’, function() { lb.show(); });
if(rb.css(‘opacity’)==’0′) {
rb.show().animate({ ‘opacity’:’1′ }, { duration:10, easing:’easeOutQuad’ });
}
}
Mimi Says:
Hello, This is what I am looking for, however I can’t get the source code. Could you please let me know how can I download it? Thanks, Mimi.
brenelz Says:
Alright… when I moved servers I guess I forgot to move the source code over. Should work now!
Web Development Says:
Great slider. As an SEO I loved the fact that even after usage of jquery all the content is crawlable by search engine spiders. I will definitely try this one on my new website.
Kyle Says:
I love this!
One thing I’m wondering – is there a way to make it so the width is 100% of the page? I’m playing with it and can get the background to show 100%, but none of the slides are showing up correctly. They seem to be there in order, but aren’t taking up the proper amount of room (i.e. each slide is taking up 100% instead of just the wrapper taking up 100%). Has anyone managed to get this working properly?
Kyle Says:
Also: looking to adjust the opacity of the buttons when they’re moused over. I’m reading through the javascript file but can’t exactly figure out how to do it or where to put it. Basically, my goal is to have the left and right buttons exist at 50% opacity until hover, at which point they will fade up to 100% opacity.
[...] Content Slider [...]
Scott Says:
can’t thank you enough, thanks!!
Willem Says:
I have the same question like Pino
It’s possible to start with a custom slide (for example start with slide 3…) with a small javascript on the loaded page?
Thank you
Willem Says:
Great script.
The left button dissappears at the last slide in Chrome and Firefox. IE works fine.
Whats wrong?
[...] Content Slider with jQuery In this tutorial you will learn how to build a content slider with the use of jQuery only. You will be able to use the final result for commercial and personal projects also. [...]
[...] as a download link to the files—is provided in the post. Start/Stop SliderView the Demo →Content Slider This is a tutorial that shows you how to build a content slider with jQuery. The content slider is [...]
[...] Content Slider [...]
[...] Content Slider [...]
[...] Content Slider with jQuery In this tutorial you will learn how to build a content slider with the use of jQuery only. You will be able to use the final result for commercial and personal projects also. [...]
GI Says:
Great help! Thank you for the slide sample…
[...] CSS3 Please HTML5 Doctor – The Section Element jQuery Smooth Div Scroller jQuery Slider Kit jQuery Content Slider jQuery Page Slider Fancy Move – jQuery Product Slider Charlie Gentle – Nice use of [...]
[...] Slider de Conteúdo [...]
Brian Says:
This is great. Thanks a ton. Can you please tell me how to add the auto slide functionality? I’ve read through the post and comments twice and still can’t find the info I’m looking for.
[...] Build a Content Slider with jQuery [...]
Tareq Says:
Is there a way to show 3 items instead of 1 like a scroller. Thanks for this great article.
jacob Says:
nice script, thanks for this tutorials
Andrew Says:
Is there away to make the content appear under the image?
Jonatas CD Says:
Hey
just to report that it works fine and I mange to have it on wordpress with autoplay and hoverpause
=]
it is working here: http://www.imil.org.br/tag/politica/
cheers
Kunaal Says:
September 4th, 2011 at 9:47 pm
Thanks dude, many tutorials are available over the net but this one was indeed required.
Nisar Says:
September 6th, 2011 at 4:52 am
Slider is too good.But there is a problem. if you are using ‘tab’ button to switch between the contents inside slider,then the it will switch to next slider and so will get unexpected result
Genevieve Says:
September 19th, 2011 at 11:11 am
Nice tutorial!
Would be great though to be able to write the text under the picture and not to the right side of it. (To not have a “defined height value”, so that the box size would adjust to the content. I tried to modify the code, but failed miserably.)
(I have to say that this is the only slider I found that doesn’t cause any problem when we zoom in or out in Explorer and that’s really great!)
Minx Says:
This was very helpful, and a wonderful slider.
I am currently using it on my website. Though, it is not uploaded yet, I am having problems using a pageloader, provided by Gaga on this site: http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/>
When I plugin the necessary information, and view it, the pageloader would stop at 40%. However, when I remove this content slider, the page loader works. Do you have any ideas as to why this could be happening? I would like to have both the loader and the content slider on my website.
Thank you.
Gareth Says:
Hi,
I cannot for the life of me get the buttons to appear. I believe there might be an issue over file names in the javascript. Any ideas?
Also, you mark the contentslider div with an ‘id’ property and a ‘class’ property at different points which was slighty confusing!
But a good tutorial all in all, thanks.
Gareth Says:
Ignore the above comment, but I still can’t get my left button to appear. The right button comes up and works, the articles scroll right, but the left button never comes up.
Gareth Says:
It appears to me to be an issue with this portion of the code -
// Animate the entrance of the buttons
.find('.cs_leftBtn')
.css('opacity','0')
.hide()
.end()
.find('.cs_rightBtn')
.hide()
.animate({ 'width':'show' });
as the right button doesnt disspear when it reaches my 4th article, and the left doesnt appear at all. Tried in various browsers with the same result each time. If i delete various params, such as the hide param, the left button will show, but the right button still doesnt hide at the 4th article which then breaks it entirely.
innerurge Says:
October 11th, 2011 at 11:15 am
I would like to load different content into the the slider via ajax. I have tried adding .live() to your code to load the slider js after the content loads but I only get errors. I am not a js expert, so I was wondering if you had a simple solution to this problem?
[...] Content Slider [...]
[...] Build a Content Slider with jQuery [...]
Lindsay Says:
I have implimented this slider with absolutely NO issues what so ever so first – THANK YOU for your clear and concise tutorial…
I also wanted to simply add my voice to those who are asking for the ability to create a panel of navigation links similar to the “progress bars” seen on other sliders. The ability to click on one and skip to specific panels would be KEY!
Another great thing would be to integrate a “never ending” loop so you don’t have to click back through to the get to beginning in an update.
Either way – thanks for a great plugin. I found it perfectly easy to use.. Unfortunately I will not be able to keep it as I will need the navigation feature in order to complete my interface for my website.
November 28th, 2011 at 12:49 pm
[...] Build a Content Slider with jQuery [...]
Zacca Says:
Any one can tell me how start in a custom slide??
I need start in second slide [ have 3 in totaly ]
younes Says:
December 12th, 2011 at 5:02 am
merci pour ces informations c’est gebial
December 12th, 2011 at 6:20 am
[...] Content Slider with jQuery [...]
Noget Says:
December 13th, 2011 at 8:11 am
For some reason, I get an error, when I place an email inside the slider?
Mohsin Says:
dear sir i want to use this dynamically.
i mean i want to use it for viewing product image,,then its name and details..i want these all things dynamically.
plz help me..
<img src="../primerice/images/prd_images/” width=”549″ height=”552″>
Prime Rice Products
Main Products Of Prime Rice Mills
<a href="prod_detail&p_id=” class=”readmore”>Product Details
$(function() {
$(‘#one’).ContentSlider({
width : ’900px’,
height : ’400px’,
speed : 800,
easing : ‘easeInOutBack’
});
});
$(function() {
$(‘#two’).ContentSlider({
width : ’600px’,
height : ’266px’,
speed : 400,
easing : ‘easeOutQuad’,
textResize : true
});
});
this is the whole code of my page..plzzzzzzzzzzzzzzz help me plz……..
Mohsin Says:
how to use this slider dynamically..i mean when we want to get the records dynamically and insert in this slider..
plz help……..
Jason Weber Says:
Hey Brenley! Thank you very much for your time and generously offering this jquery slider. I’m not a professional programmer, and I’m definitely not too intelligent. I’m wondering why, at the URL I submitted, http://www.ussvision.com/services/cognex.aspx, that my article content — the writing, that is — isn’t showing in my IE. It might be my browser’s settings, but I’ve cleared the cache, and it’s great in FF and Chrome, and I have the pictures and arrows functioning in IE. But I cannot get the text to show up on my two home computers’ IE browsers. Other than the basic styling, the only real adjustment I made was to change all the 900x400s to 700×350 in the html, css, and js. I didn’t use the default.css, either. If you have the time, any ideas or suggestions to help me in this regard would be greatly appreciated, Thanks again!
Nagesh Says:
Hi,
I am using this slider in my site, but could not mention the site because I am developing in my local machine.
Problem is that when I change the speed of slider it is not reflecting on the page. Could you tell me the reason why I am getting that problem.
thanks
Nagesh
Nagesh Says:
sorry,
I found the solution. I am changing in one file checking in another file.
thanks
nagesh
[...] 21.Build a Content Slider with jQuery [...]
asha Says:
Hello,
I’d like to add to the request to add some sort of navigation controls for all the images in the slider, not just the next/prev buttons. I opened up a page on stackoverflow – http://stackoverflow.com/questions/8831131/modify-jquery-slider-for-greater-control-add-clickable-preview-thumbnails-that in the hopes that we can get this resolved. If anyone has found any solutions, please let us know. Likewise, if I find out anything, I’ll post it here.
Best,
Renata Says:
Is there a way to detect the active slide? Any help would be really appreciated, thx!
jQuery Thumbnail Slider Says:
I suggest taking a look at Flow Slider. With it, you can create a similar slider in minutes.
[...] Content Slider [...]
Chris Says:
January 30th, 2012 at 12:12 pm
Hi Jason,
Thanks for providing the tutorial and code.
I’d also like to see a granular nav if possible. I’m halfway through building a site and spent quite a bit of time messing around with this one to get it how I wanted.
I’ve since realised I need the pagination, and found a JQuery slider that has it, but I can’t integrate it in the same way.
The way this one works lends itself well to customisation (as you stated it was meant to do) but the others I’ve tried don’t.
It’d really be great to not have to rip it all apart but I guess I’ll have to if you don’t have time to do this.
Whatever happens, thanks for the tutorial.
Cheers
Saad Says:
February 5th, 2012 at 11:02 pm
Hi,
I’m new to jquery, how can I change moving direction to be left to right.
Ben Says:
I implemented this slider on a site, and just before I went live with it, the back/next buttons disappeared. I had done some major restyling, so I removed my version and put in a clean version, but the buttons were still gone. My best guess is that it’s incompatible with WP 3? Has anyone else had similar problems?
February 10th, 2012 at 4:53 pm
[...] Content Slider [...]
[...] Build a Content Slider with jQuery [...]
kamal Says:
Hi can we make it manual slide ?
BK Says:
I am implementing this slider and it works fine in Firefox and Chrome but Internet Explorer 8 is telling me it is blocking a script on the page which is slider and then I have to choose to allow it. That is not going to work and scare unknowledgeable people visiting my site? Anyone else have this issue with IE 8, it blocking the slider?
[...] Source Demo [...]
Manu Says:
for auto play plse add this code between
var defaultWidth = defaults.width;
var o = $.extend(defaults, options);
var w = parseInt(o.width);
var n = this.children(‘.cs_wrapper’).children(‘.cs_slider’).children(‘.cs_article’).length;
var x = -1*w*n+w; // Minimum left value
var p = parseInt(o.width)/parseInt(defaultWidth);
var thisInstance = this.attr(‘id’);
var inuse = false; // Prevents colliding animations
//code to be added here
function moveSlider(d, b)
{
var l = parseInt(b.siblings(‘.cs_wrapper’).children(‘.cs_slider’).css(‘left’));
if(isNaN(l)) {
var l = 0;
}
var m = (d==’left’) ? l-w : l+w;
if(m=x) {
b
.siblings(‘.cs_wrapper’)
.children(‘.cs_slider’)
.animate({ ‘left’:m+’px’ }, o.speed, o.easing, function() {
inuse=false;
});
the code is
var autoslide = setInterval(headline_rotate, 8000);
function headline_rotate() {
$leftD = $(‘.cs_leftBtn’).css(‘display’);
$rightD = $(‘.cs_rightBtn’).css(‘display’);
if($leftD == ‘none’){
$dir = ‘goRight’;
}
if($rightD == ‘none’){
$dir = ‘goLeft’;
}
($dir == ‘goRight’) ? $curButt=’.cs_rightBtn’ : $curButt=’.cs_leftBtn’;
$($curButt).trigger(‘click’);
}
$(‘#two’).hover(function() {
clearInterval(autoslide);
}, function() {
autoslide = setInterval(headline_rotate, 8000);
});
omi Says:
i am using your slider for making an aptitude test,and it was working fine till i was using it for 4 questions,but now when i am trying to increase the number of questions first 11 questions are visible but last 9 questions are invisible and the content area is blank..??
K1t Says:
Thanks for this tutorial. I’ve got the slider working on my page, but the buttons do not show up so I can’t go to the next slide. Can anyone please advise how I can get the left & right buttons showing? Thanks
[...] Content Slider [...]
tower crane Says:
Hi, how can make the content slider automatically?
Chris Says:
Hi,
I was trying that autoslide script but where that $dir variable comes from?
Getting an error message as it is not declared.
Thanks
September 22nd, 2012 at 6:35 am
[...] Content Slider [...]
November 2nd, 2012 at 12:30 pm
[...] Content Slider [...]
Jason Weber Says:
Hello Brenley! Thank you once again for your time and generosity in offering this slider. I use it all over my website, http://www.ussvision.com and it works perfectly on all major browsers (tested on IE 7+, Chrome, Firefox, Safari, and Opera). It shortens up my page so I can get all the information I want in there, and gives the end-user an easy interface in which to navigate through the information — pictures and text. Thanks again!
Julian Says:
November 22nd, 2012 at 4:10 am
Could anybody solve the issue about displaying more than 10 slides?
Harmeet Says:
December 13th, 2012 at 2:01 am
Hi. Very nice plugin. I am facing an issue though. When i give the width 100% in the function, then the slides disappear and shows blank white area. Any ideas?
SMadhu Says:
How can we add auto sliding function ??
Its awesome tutorial , just wanna to know is it possible to add autosliding….plz hepl with code
thnx
Timothy Says:
Nice Job! Is there any way I can make it an auto-slide?
Thanks
Sergius Says:
February 12th, 2013 at 10:36 am
Also wanted to know, how can make auto-slide…
Gustav Says:
Awesome content slider, thanks!!
bhargav Says:
Hi,
How do i move the slides every 15 seconds.
Regards,
Bhargav Shah
Sandeep Says:
Awesome tutorial. I am gona try it.
Divyata Says:
Subhod it worked thanks.
Andres Says:
is there any way to get an update for jquery 1.9???
Twitter
Follow me on Twitter to keep up to date!
RSS Feed
Keep up with all of our updates by subscribing to our RSS feed!
FaceBook
Join our group on Facebook and become a fan of us!