Build a Content Slider with jQuery

 

Another Content Slider? Really?

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:

  1. Create an easy-to-implement content slider plugin
  2. Allow for multiple instances on a page
  3. Allow users to customize the size, button images, etc.
  4. Create valid markup

View the Demo
Get the Source Code On GitHub

Requirements for This Tutorial

  1. The latest release of jQuery (1.3.2 at the time of writing)
  2. George Smith’s easing plugin for jQuery
  3. Functional knowledge of HTML and CSS

Step 1: The Markup

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.

View Step 1

Step 2: The CSS

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.

View Step 2

Step 3: The jQuery

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;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!

View the Demo

Step 4: Customizing the Plugin

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>

Conclusion

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.

Be Sociable, Share!

Written by Brenley Dueck

 

224 Responses to “Build a Content Slider with jQuery”

  1. Alan Says:

    March 31st, 2009 at 11:02 am

    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.

  2. jiggy boo Says:

    March 31st, 2009 at 11:19 am

    IE 7 – back link does not work

  3. teh Says:

    March 31st, 2009 at 12:02 pm

    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

  4. teh Says:

    March 31st, 2009 at 12:05 pm

    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

  5. Andrew Says:

    March 31st, 2009 at 2:40 pm

    The z-index of 10000 is way to excessive… it will up on top of things it shouldn’t.

  6. Jason Lengstorf Says:

    March 31st, 2009 at 3:22 pm

    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!

  7. Brenley Dueck Says:

    March 31st, 2009 at 4:30 pm

    Source code has been updated with fixes

  8. wil waldon Says:

    April 1st, 2009 at 8:54 am

    Is there any chance you are working on WordPress integration?

  9. Bill Bolmeier Says:

    April 1st, 2009 at 9:42 am

    Very nice.

  10. Jason Lengstorf Says:

    April 1st, 2009 at 1:17 pm

    @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.

  11. shane sponagle Says:

    April 1st, 2009 at 1:38 pm

    This is great. Thanks.

  12. wil waldon Says:

    April 1st, 2009 at 2:03 pm

    @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 :)

  13. My Bad Attitude » Build a Content Slider with jQuery Says:

    April 1st, 2009 at 2:20 pm

    [...] Here’s a good tutorial on building a slider with jQuery. [...]

  14. Meshach Says:

    April 2nd, 2009 at 7:14 pm

    Nice!

  15. jack Says:

    April 2nd, 2009 at 11:54 pm

    wonderful article, also shows the power of JQuery

  16. Bookmarks for April 3rd, 2009 | vitali software Says:

    April 3rd, 2009 at 12:02 am

    [...] Build a Content Slider with jQuery :: Brenelz’s Web Development Tips :: Website Design Winnipe… – (More…) [...]

  17. Mike Says:

    April 4th, 2009 at 11:28 am

    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!

  18. links for 2009-04-04 | Visualrinse | Design and Development by Chad Udell Says:

    April 4th, 2009 at 6:04 pm

    [...] 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 [...]

  19. Jason Lengstorf Says:

    April 4th, 2009 at 7:38 pm

    @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.

  20. Jimbob Says:

    April 5th, 2009 at 5:31 am

    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

  21. jeroen Says:

    April 5th, 2009 at 8:05 am

    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

  22. Jason Lengstorf Says:

    April 5th, 2009 at 1:57 pm

    @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!

  23. Jimbob Says:

    April 5th, 2009 at 4:21 pm

    @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. :)

  24. 網站製作學習誌 » [Web] 連結分享 Says:

    April 7th, 2009 at 9:55 pm

    [...] Build a Content Slider with jQuery [...]

  25. Waqas Says:

    April 8th, 2009 at 3:53 am

    Can we add some auto sliding function in it.

  26. Friday Designer Resource Links | Web Design Says:

    April 10th, 2009 at 2:52 pm

    [...] Build a Content Slider with jQuery A cool Jquery content slider to add to your site. [...]

  27. DCTH Member of the Week #1: Jason Lengstorf « DCTH Says:

    April 14th, 2009 at 12:13 am

    [...] A jQuery content slider tutorial [...]

  28. Meshach Says:

    April 14th, 2009 at 11:03 am

    Nice stuff!

  29. b00m Says:

    April 15th, 2009 at 8:35 am

    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.

  30. Jo Says:

    April 18th, 2009 at 7:57 pm

    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 :)

  31. Frank Says:

    April 20th, 2009 at 11:16 am

    Here’s a marvel idea, post a publishing date at the top of your article!

  32. Nice thanks Jason Says:

    April 21st, 2009 at 3:01 pm

    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?

  33. carolina Says:

    April 27th, 2009 at 10:45 am

    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?

  34. 15 Exceptional JQuery Resources And Tutorials Says:

    May 2nd, 2009 at 2:36 pm

    [...] 8. Content Slider [...]

  35. Ankit Sabharwal Says:

    May 5th, 2009 at 4:39 am

    Hi Jason

    Great post ! you made the task a lot easier.
    thanks

  36. Kevin Says:

    May 8th, 2009 at 4:40 pm

    How can I get this to auto-rotate the content?

    I was thinking I’d use setInterval(‘moveSlider(“right”, leftBtn);’, 2000);

  37. kuldeep Says:

    May 12th, 2009 at 3:06 am

    this code has bug-”object expected!” in ie-6,ie-7

  38. Content Slider with jQuery @ Agat cold Says:

    May 12th, 2009 at 8:53 am

    [...] Visit original site  to get instructed about this feature. Build a Content Slider with jQuery Web Design Content Slider, Content Slider with jQuery [...]

  39. hnns Says:

    May 19th, 2009 at 4:52 am

    hi. great slider!! cheers. any idea how to include an automatic timed slide?

    that’d be great

  40. matthew Says:

    June 3rd, 2009 at 8:57 pm

    Thanks for this!

  41. Ty Says:

    June 10th, 2009 at 3:24 am

    Seconding wil waldon – I would love a wordpress tutorial. :D 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

  42. Paul Says:

    June 17th, 2009 at 8:45 am

    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?

  43. Sbudah Says:

    July 2nd, 2009 at 2:26 pm

    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);

  44. 7 Excellent JavaScript Content Sliders Says:

    July 6th, 2009 at 9:31 am

    [...] Build a Content Slider with jQuery – a tutorial by Jason Lengstorf from Ennui Design [...]

  45. Corey Watson Says:

    July 6th, 2009 at 6:42 pm

    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!

  46. Corey Says:

    July 6th, 2009 at 6:43 pm

    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!

  47. jQuery and Usability Links « streamhacker.com Says:

    July 31st, 2009 at 12:06 pm

    [...] Build a Content Slider with jQuery :: Brenelz’s Web Development Tips [...]

  48. Humberto Says:

    August 30th, 2009 at 10:02 pm

    How long have you been blogging…your good at it.

  49. 40+ Fresh And New jQuery Plugins Of Slider’s And Gallery’s - Themeflash : One Stop For All Your Web Resources Says:

    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. [...]

  50. 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?

  51. Ultimate collection of top jQuery tutorials, tips-tricks and techniques to improve performance « Technosiastic! Says:

    October 11th, 2009 at 11:42 pm

    [...] Build a Content Slider with jQuery [...]

  52. 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:

    http://technosiastic.wordpress.com/2009/09/24/collection-of-top-jquery-tutorials-tips-tricks-techniques-to-improve-performance/

  53. Lyle Says:

    October 24th, 2009 at 2:06 am

    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.

  54. 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?

  55. Djavan Says:

    November 17th, 2009 at 7:46 pm

    nvm I was able to fix it by changing:

    to

  56. 40 jQuery Plugins, Tutorials, Resources And Tools Of 2009 | Tweeaks Design Says:

    December 28th, 2009 at 9:08 pm

    [...] Build a Content Slider with jQuery [...]

  57. Dups Says:

    December 29th, 2009 at 5:10 am

    Good Content slider, better if you can add some extra configurations like auto slideshow

  58. Skiff Says:

    December 30th, 2009 at 11:26 pm

    Another example of Jason Lengstorf’s exceptional coding. :)

  59. anna Says:

    January 18th, 2010 at 3:15 pm

    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.

  60. Steve Says:

    January 22nd, 2010 at 8:04 am

    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…

  61. Morgan Says:

    February 3rd, 2010 at 4:37 pm

    @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.

  62. 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

  63. sam s Says:

    March 4th, 2010 at 2:44 pm

    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.

  64. gladys Says:

    March 7th, 2010 at 6:54 pm

    hi. I having problem with getting my images to show pass the third slide. How can I fix it ?

    Thank you in advance.^^

  65. zerg Says:

    March 16th, 2010 at 7:20 pm

    hi im having problem making it dynamic trough json request…

  66. Ondine Says:

    March 28th, 2010 at 9:52 am

    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 :D
    the page is http://b0rdelique.free.fr/portfolio.php

  67. Luis Says:

    March 31st, 2010 at 8:49 am

    Thanks for the tutorial. Great!

    Is there a problem with more then 10 contents to be shown?

  68. chicago web development Says:

    April 9th, 2010 at 10:59 am

    I hope all of these techniques work out, as I definitely need multiple instances on my page.

  69. Rob Anderson Says:

    April 17th, 2010 at 2:35 pm

    Thanks so much for this plugin and tutorial!

  70. Jörg Says:

    April 20th, 2010 at 10:01 am

    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

  71. Jorge Says:

    April 28th, 2010 at 4:23 am

    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

  72. Richey Says:

    May 12th, 2010 at 4:17 am

    A real great slider! Thank you ;)

  73. 25 Very Detailed jQuery Image and Content Slider Tutorials | Says:

    May 13th, 2010 at 7:57 am

    [...] 21.Build a Content Slider with jQuery [...]

  74. Lora Says:

    May 17th, 2010 at 11:31 am

    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.

  75. Lora Says:

    May 17th, 2010 at 11:52 am

    Nevermind! I figured it out!

  76. Best jQuery Feature Content Slider plugins and tutorials - Wsblogz.com – Web design magazine Says:

    May 18th, 2010 at 9:22 pm

    [...] Build a Content Slider with jQuery [...]

  77. links for 2010-05-18 » All things must pass… - Daniel Roux’s blog Says:

    May 19th, 2010 at 12:07 am

    [...] Build a Content Slider with jQuery | Brenelz Web Design Solutions (tags: jquery jquery-plugins slider) [...]

  78. Best jQuery Feature Content Slider plugins and tutorials Says:

    May 20th, 2010 at 8:32 pm

    [...] Build a Content Slider with jQuery [...]

  79. Mack Says:

    May 28th, 2010 at 7:24 pm

    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?

  80. Wordpress & Jquery Content Slider Tutorial « SA Web Studios Blog Says:

    May 31st, 2010 at 1:43 pm

    [...] 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 [...]

  81. e11world Says:

    June 1st, 2010 at 8:43 pm

    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!

  82. Suwicha P. Says:

    June 17th, 2010 at 7:49 am

    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)

  83. Suwicha P. Says:

    June 17th, 2010 at 7:50 am

    Oh I forgot something. The link should be


    Link

  84. marcy Says:

    June 20th, 2010 at 5:52 pm

    This is really beautiful and a great tutorial! Thanks!

  85. Mark Says:

    June 25th, 2010 at 9:51 pm

    Great code.. Would love to include a php contact form, tried without any luck.
    Any idea why this won’t work?

  86. Robert E. McItnosh Says:

    July 2nd, 2010 at 8:11 am

    Hi, I was wondering if there was a way to use static links to jump to the page you would like to go to?

  87. 25 Sliders de jQuery | Recursos para Diseñadores Gráficos y Web | Creativos Online Says:

    July 8th, 2010 at 12:33 pm

    [...] Build a Content Slider with jQuery [...]

  88. Sassiewas Says:

    July 13th, 2010 at 3:53 am

    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?

  89. shan Says:

    July 26th, 2010 at 7:28 pm

    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?

  90. Thom Says:

    August 2nd, 2010 at 9:20 am

    Hm, what am I doing wrong? It works when I test it locally…

    http://www.theblueroomonline.com/demo.html

  91. Margaret Kimball | Design. Illustration. And Other Thinkings. | Essay as Artist’s Book No. 3 Says:

    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 [...]

  92. 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??

  93. 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?

  94. 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?

  95. 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!

  96. 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

  97. steph Says:

    October 8th, 2010 at 12:42 am

    thankyou so much for this!

  98. anre Says:

    October 11th, 2010 at 11:50 pm

    how to allways show prewiev button

  99. Boon Says:

    November 1st, 2010 at 5:11 pm

    Nice. Have got this working.
    Anyone no how i can make the transitions fade instead of slide on button press?

  100. chumpy Says:

    November 2nd, 2010 at 2:35 pm

    Did anyone figure out the slide limit issue. I too am experiences blank slides after 13.

  101. 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”);
    }

  102. Dani Says:

    November 11th, 2010 at 2:40 pm

    Thie is what I was looking for. Thanks a lot!

  103. 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

  104. 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

  105. 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!

  106. 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.

  107. 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

  108. 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

  109. 7 Slider jQuery e Tutoriais : Says:

    November 26th, 2010 at 11:40 am

    [...] Build a Content Slider with jQuery [...]

  110. 80 jQuery Image Slideshow and Content Slider « CSS & JQuery Sample - FreshDesignWeb Says:

    December 6th, 2010 at 4:53 am

    [...] 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 [...]

  111. Lou Says:

    December 12th, 2010 at 11:44 am

    “All Content © 2009 Ennui Design” may pose a problem for some who download your code.

  112. Killing Hours Says:

    December 12th, 2010 at 2:58 pm

    @Rajbir

    Glad it helped you out!

    -KH

  113. 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.

  114. 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!

  115. Andrew Valish Says:

    December 22nd, 2010 at 12:55 pm

    Disregard my previous comments. I believe to have figured it out. Thank you!

  116. 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?

  117. Jasper Says:

    December 23rd, 2010 at 4:49 am

    Sorry, figured it out. But is there a way to make it continous?

  118. 50 jQuery Photo Gallery Plugins | webdesign14.com Says:

    December 26th, 2010 at 1:39 am

    [...] 50. Build a Content Slider with jQuery [...]

  119. mustapha Says:

    January 2nd, 2011 at 4:20 am

    thankyou so much for this

  120. More on jQuery: Slider Plugins and Tutorials - Noupe Design Blog Says:

    January 10th, 2011 at 6:34 am

    [...] 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: [...]

  121. Jasper Says:

    January 11th, 2011 at 2:29 am

    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”);
    }
    });

  122. Cgbaran Says:

    January 12th, 2011 at 11:12 am

    Nice tutorial thanks

  123. 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!

  124. 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

  125. Best of jQuery Content Sliders - Hidden Pixels Says:

    January 27th, 2011 at 6:57 am

    [...] Build a Content Slider with jQuery [...]

  126. Ray Says:

    January 29th, 2011 at 5:13 pm

    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.

  127. Ray Says:

    January 29th, 2011 at 5:15 pm

    @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;
    }

  128. Ray Says:

    January 29th, 2011 at 5:16 pm

    The last comment was targeted @jordan not @pino

  129. Ray Says:

    January 29th, 2011 at 7:09 pm

    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).

  130. 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

  131. 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 ?

  132. Jasper Says:

    March 1st, 2011 at 9:36 am

    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”);
    }
    });

  133. Mohammad Umer Says:

    March 17th, 2011 at 8:54 am

    How can I use unlimited slides?

  134. Moe Says:

    March 23rd, 2011 at 2:43 am

    Love the slider but it won’t let me use Lightbox within the slider… is there a fix for that?

  135. Swarjit Says:

    March 23rd, 2011 at 10:19 am

    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.

  136. cebuano programmer Says:

    March 25th, 2011 at 12:07 am

    thanks for this! …..

  137. Maggie Says:

    April 5th, 2011 at 4:30 am

    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.

  138. 11 Helpful jQuery Content Slider Tutorials | blueblots.com Says:

    April 5th, 2011 at 7:45 am

    [...] In this tutorial, you will learn how to create a content slides with jQuery. Visit Site [...]

  139. Belen Says:

    April 6th, 2011 at 3:01 am

    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?

  140. jQuery Slider Tutorials | Template Monster Blog Says:

    April 29th, 2011 at 3:23 am

    [...] Build a Content Slider with jQuery [...]

  141. 20 jQuery Slideshow interativos para Site ou Blog | Blog Rafael Designer: Design + Tecnologia = Inovação | mídias sociais, tutoriais, vídeos, tecnologia, design Says:

    April 29th, 2011 at 1:08 pm

    [...] 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 [...]

  142. Dinesh Karki Says:

    May 3rd, 2011 at 4:00 am

    Awesome. M gonna use it in my upcoming projects.

  143. 15 Slideshows interativos em jQuery para o seu site ou blog « Uou Info Says:

    May 9th, 2011 at 6:45 pm

    [...] Build a content slider with jQuery [...]

  144. 15 Slideshows interativos em jQuery para o seu site ou blog | uouinfo.com.br/novo Says:

    May 12th, 2011 at 4:52 pm

    [...] Build a content slider with jQuery [...]

  145. Just Great 89 Unique jQuery Slider Tutorials And Plugins Says:

    May 19th, 2011 at 2:43 pm

    [...] 41. Build a Content Slider with jQuery [...]

  146. Around 50 Great Unique JQuery Gallery Plugins Says:

    May 22nd, 2011 at 1:31 pm

    [...] 50. Build a Content Slider with jQuery [...]

  147. shrimpsoup Says:

    May 27th, 2011 at 4:12 am

    how to add, pagination.. like at page 1, page 2 ?

  148. firederik Says:

    June 3rd, 2011 at 2:04 am

    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’ });
    }
    }

  149. Mimi Says:

    June 9th, 2011 at 3:52 am

    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.

  150. brenelz Says:

    June 9th, 2011 at 7:55 am

    Alright… when I moved servers I guess I forgot to move the source code over. Should work now!

  151. Web Development Says:

    June 28th, 2011 at 12:53 am

    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.

  152. Kyle Says:

    June 29th, 2011 at 2:36 pm

    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?

  153. Kyle Says:

    June 29th, 2011 at 3:10 pm

    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.

  154. 190 + best! jQuery slider tools - Part (I) - Pixel2Pixel Design Says:

    July 4th, 2011 at 5:28 am

    [...] Content Slider [...]

  155. Scott Says:

    July 6th, 2011 at 8:05 am

    can’t thank you enough, thanks!!

  156. Willem Says:

    July 13th, 2011 at 4:06 am

    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

  157. Willem Says:

    July 13th, 2011 at 4:25 am

    Great script.

    The left button dissappears at the last slide in Chrome and Firefox. IE works fine.

    Whats wrong?

  158. 21 Amazing jQuery Images Galleries Sliders and Slideshows Plugins | Bitmag Says:

    July 13th, 2011 at 2:07 pm

    [...] 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. [...]

  159. 15 jQuery Space-Saving Content Sliders and Carousels Says:

    July 15th, 2011 at 2:55 am

    [...] 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 [...]

  160. 15 jQuery Space-Saving Content Sliders and Carousels - WORDPRESS4free | WORDPRESS4free Says:

    July 15th, 2011 at 6:20 pm

    [...] Content Slider [...]

  161. 15 jQuery Space-Saving Content Sliders and Carousels - WordPress Vampire Says:

    July 16th, 2011 at 3:43 am

    [...] Content Slider [...]

  162. 21 Amazing jQuery Images Galleries Sliders and Slideshows Plugins Says:

    July 16th, 2011 at 10:15 pm

    [...] 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. [...]

  163. GI Says:

    July 17th, 2011 at 4:27 am

    Great help! Thank you for the slide sample…

  164. More Links & JS Sliders » Ryan O'Hara Says:

    July 18th, 2011 at 8:25 pm

    [...] 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 [...]

  165. 8 Sliders jQuery para usar em blogs ou sites Says:

    July 26th, 2011 at 9:45 am

    [...] Slider de Conteúdo [...]

  166. Brian Says:

    August 12th, 2011 at 2:29 pm

    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.

  167. 73 tutoriels pour faire défiler vos contenus (Slideshow, Sliders & Diaporama) Says:

    August 14th, 2011 at 8:25 pm

    [...] Build a Content Slider with jQuery [...]

  168. Tareq Says:

    August 17th, 2011 at 1:45 am

    Is there a way to show 3 items instead of 1 like a scroller. Thanks for this great article.

  169. jacob Says:

    August 22nd, 2011 at 10:38 pm

    nice script, thanks for this tutorials

  170. Andrew Says:

    August 26th, 2011 at 8:04 am

    Is there away to make the content appear under the image?

  171. Jonatas CD Says:

    August 28th, 2011 at 1:22 pm

    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

  172. Kunaal Says:

    September 4th, 2011 at 9:47 pm

    Thanks dude, many tutorials are available over the net but this one was indeed required.

  173. 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

  174. 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!)

  175. Minx Says:

    October 4th, 2011 at 3:20 pm

    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/&gt;

    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.

  176. Gareth Says:

    October 11th, 2011 at 6:55 am

    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.

  177. Gareth Says:

    October 11th, 2011 at 7:34 am

    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.

  178. Gareth Says:

    October 11th, 2011 at 7:50 am

    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.

  179. 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?

  180. Save Space with 15 jQuery Carousels and Content-Sliders | DesDevWeb Says:

    October 12th, 2011 at 2:34 pm

    [...] Content Slider [...]

  181. 25 Excellent jQuery Slider Tutorials and Plugins : IT Digest | Latest Updates of Full Version Softwares & Utilities , Nepali Unicode, Nepali Calendar, Nepali Date Converter Says:

    October 15th, 2011 at 7:29 pm

    [...] Build a Content Slider with jQuery [...]

  182. Lindsay Says:

    November 8th, 2011 at 3:50 pm

    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.

  183. 390 ressources Javascript & jQuery Says:

    November 28th, 2011 at 12:49 pm

    [...] Build a Content Slider with jQuery [...]

  184. Zacca Says:

    December 6th, 2011 at 1:34 pm

    Any one can tell me how start in a custom slide??

    I need start in second slide [ have 3 in totaly ]

  185. younes Says:

    December 12th, 2011 at 5:02 am

    merci pour ces informations c’est gebial

  186. 30 jQuery Images Sliders and Slideshows Plugins, 2012 Edition | DesignDevBits Says:

    December 12th, 2011 at 6:20 am

    [...]  Content Slider with jQuery [...]

  187. Noget Says:

    December 13th, 2011 at 8:11 am

    For some reason, I get an error, when I place an email inside the slider?

  188. Mohsin Says:

    January 5th, 2012 at 2:34 pm

    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……..

  189. Mohsin Says:

    January 5th, 2012 at 2:52 pm

    how to use this slider dynamically..i mean when we want to get the records dynamically and insert in this slider..
    plz help……..

  190. Jason Weber Says:

    January 6th, 2012 at 1:21 am

    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!

  191. Nagesh Says:

    January 7th, 2012 at 3:38 am

    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

  192. Nagesh Says:

    January 7th, 2012 at 4:08 am

    sorry,

    I found the solution. I am changing in one file checking in another file.

    thanks
    nagesh

  193. 25 Very Detailed jQuery Image and Content Slider Tutorials : Web design Says:

    January 8th, 2012 at 9:54 pm

    [...] 21.Build a Content Slider with jQuery [...]

  194. asha Says:

    January 12th, 2012 at 1:21 am

    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,

  195. Renata Says:

    January 21st, 2012 at 2:53 pm

    Is there a way to detect the active slide? Any help would be really appreciated, thx!

  196. jQuery Thumbnail Slider Says:

    January 24th, 2012 at 8:29 pm

    I suggest taking a look at Flow Slider. With it, you can create a similar slider in minutes.

  197. JQuery Slider Tools, 200 Best – part 2 | Free Website Template Center Says:

    January 29th, 2012 at 8:55 am

    [...] Content Slider [...]

  198. 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

  199. 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.

  200. Ben Says:

    February 6th, 2012 at 9:07 am

    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?

  201. 50 Best jQuery Slider Tools Part 1 | Oktilyon Teknoliyon Says:

    February 10th, 2012 at 4:53 pm

    [...] Content Slider [...]

  202. Best of jQuery Content Sliders | JS Tips Says:

    March 10th, 2012 at 8:50 am

    [...] Build a Content Slider with jQuery [...]

  203. kamal Says:

    March 21st, 2012 at 4:28 am

    Hi can we make it manual slide ?

  204. BK Says:

    April 8th, 2012 at 8:16 am

    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?

  205. 100 jQuery Sliders for Images/Content (Part 1) | jQuery4u Says:

    April 29th, 2012 at 5:32 pm

    [...] Source Demo [...]

  206. Manu Says:

    June 20th, 2012 at 9:53 pm

    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);
    });

  207. omi Says:

    June 28th, 2012 at 2:55 pm

    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..??

  208. K1t Says:

    July 4th, 2012 at 6:13 pm

    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

  209. Awesome 200, JQuery Slider Tools! « creative2slice Says:

    July 10th, 2012 at 11:17 am

    [...] Content Slider [...]

  210. tower crane Says:

    July 25th, 2012 at 1:39 am

    Hi, how can make the content slider automatically?

  211. Chris Says:

    July 28th, 2012 at 9:16 am

    Hi,
    I was trying that autoslide script but where that $dir variable comes from?
    Getting an error message as it is not declared.
    Thanks

  212. 50 Best jQuery Slider Tools Part 1Best Smashing | Best Smashing Says:

    September 22nd, 2012 at 6:35 am

    [...] Content Slider [...]

  213. 200 BEST JQUERY IMAGE SLIDER PLUGIN | Rohidas Vitthal Sanap: Web Developer/Designer Says:

    November 2nd, 2012 at 12:30 pm

    [...] Content Slider [...]

  214. Jason Weber Says:

    November 6th, 2012 at 1:27 pm

    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!

  215. Julian Says:

    November 22nd, 2012 at 4:10 am

    Could anybody solve the issue about displaying more than 10 slides?

  216. 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?

  217. SMadhu Says:

    January 13th, 2013 at 2:07 am

    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

  218. Timothy Says:

    February 6th, 2013 at 5:21 am

    Nice Job! Is there any way I can make it an auto-slide?
    Thanks

  219. Sergius Says:

    February 12th, 2013 at 10:36 am

    Also wanted to know, how can make auto-slide…

  220. Gustav Says:

    March 1st, 2013 at 9:00 am

    Awesome content slider, thanks!!

  221. bhargav Says:

    March 10th, 2013 at 11:44 pm

    Hi,

    How do i move the slides every 15 seconds.

    Regards,
    Bhargav Shah

  222. Sandeep Says:

    March 13th, 2013 at 8:36 am

    Awesome tutorial. I am gona try it.

  223. Divyata Says:

    April 5th, 2013 at 1:36 am

    Subhod it worked thanks.

  224. Andres Says:

    April 18th, 2013 at 3:43 pm

    is there any way to get an update for jquery 1.9???

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 
connect with me!