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
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.
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.
IE 7 – back link does not work
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
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
The z-index of 10000 is way to excessive… it will up on top of things it shouldn’t.
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!
Source code has been updated with fixes
Is there any chance you are working on Wordpress integration?
Very nice.
@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.
This is great. Thanks.
@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. [...]
Nice!
wonderful article, also shows the power of JQuery
[...] Build a Content Slider with jQuery :: Brenelz’s Web Development Tips :: Website Design Winnipe… – (More…) [...]
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 [...]
@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.
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
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
@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!
@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 [...]
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 [...]
Nice stuff!
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.
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 ![]()
Here’s a marvel idea, post a publishing date at the top of your article!
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?
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 [...]
Hi Jason
Great post ! you made the task a lot easier.
thanks
How can I get this to auto-rotate the content?
I was thinking I’d use setInterval(‘moveSlider(“right”, leftBtn);’, 2000);
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 [...]
hi. great slider!! cheers. any idea how to include an automatic timed slide?
that’d be great
Thanks for this!
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
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?
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 [...]
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!
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 [...]
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. [...]
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 [...]
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:
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.
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?
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 [...]
December 29th, 2009 at 5:10 am
Good Content slider, better if you can add some extra configurations like auto slideshow
December 30th, 2009 at 11:26 pm
Another example of Jason Lengstorf’s exceptional coding. ![]()
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.
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…
@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.
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
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.
hi. I having problem with getting my images to show pass the third slide. How can I fix it ?
Thank you in advance.^^
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!