Carousels De-mystified

Ever since releasing v4.0, which introduced responsive behavior, the carousel mode (displaying / moving multiple slides) has been the most misunderstood, troublesome aspect of the slider. Proper use of the settings required a secret knowledge of the underlying codebase, and did not allow for intuitive configuration. Plainly put - the carousel config was poopy.

No longer! In version 4.1 the carousel functionality and settings have been re-worked to function in a straight forward, intuitive manner. Below is a detailed explanation of the new settings, with lots of examples. Let's do this thing.

Quick glance

Example #1: Standard responsive carousel
Example #2: Locked number of slides
Example #3: Too large slideWidth
Example #4: Move number of slides (moveSlides)
Example #5: Infinite carousel with odd number of slides
Example #6: Start on a different slide
Example #7: Not enough slides
Example #8: Vertical carousel

Example #1: Standard responsive carousel

JS:

  $(document).ready(function(){
    $('.slider1').bxSlider({
      slideWidth: 200,
      minSlides: 2,
      maxSlides: 3,
      slideMargin: 10
    });
  });

HTML:

  <div class="slider1">
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
  </div>

In order to setup a responsive carousel, we need to supply three values:

slideWidth
maxSlides
minSlides

Go ahead and resize your browser from very large, to very small. You will see that 3 slides are displayed when there is room (maxSlides) and 2 slides are displayed when room becomes tight (minSlides).

Let's disect each of the settings.

slideWidth

When telling a horizontal slider to display more than one slide, we need to supply a width for which the slides should use. If no slideWidth is supplied, the slider will expand each slide to 100% width of the container. Therefore: use this setting as the maximum width for each slide. When space allows, slides will be set to this width, and will never grow beyond it.

Another new feature regarding slideWidth, is that the slider container will now be assigned a max-width which will never be larger than the maximum number of visible slides. So, if we have a slider with the following settings: slideWidth: 100, minSlides: 2, maxSlides: 3, the slider container will recieve a max-width of "300px" (slideWidth * maxSlides). Another example: slideWidth: 200, minSlides: 1, maxSlides: 5, slider container will receive a max-width of "1000px" (slideWidth * maxSlides).

Again, the slider container will always recieve a max-width of: slideWidth * maxSlides. This is different from v4.0 in that the slider container now will "shrink-wrap" to fit maximum visible slides.

minSlides / maxSlides

Because our carousel is repsonsive and needs to look good across all devices, we have the ability to tell the carousel to display different amounts of slides depending on our screen size. Let's look at each setting:

minSlides: always display at least this many slides. This means that no matter what, this amount of slides will always be displayed. Even if we size our browser down to 200px wide, the specified value of slides will be shown.
maxSlides: never display more than this many slides. This value combined with the slideWidth value is used to generate the slider container's max-width value which ensures that the viewport can never display more than y slides. So basically, the width of our slider container will always be either: maxSlides * slideWidth or 100% (if maxSlides * slideWidth is greater than the page container).

If these settings seem confusing, think of how differently a carousel could be displayed on a small mobile screen as opposed to a large desktop screen. On a 1900px-wide desktop monitor, the carousel could easily display 10 slides at a time, with room to breathe. However, on a 300px-wide mobile phone, we would rather display 2 slides at a time (as showing 10 slides would make the slides unreadable).

Also remember that once the minSlides number of slides are displayed, the slides will be scaled down as the browser becomes smaller and smaller.

slideMargin (optional)

This is purely for presentation purposes only. This setting injects a margin of y pixels between each slide.

Example #2: Locked number of slides

JS:

  $(document).ready(function(){
    $('.slider2').bxSlider({
      slideWidth: 300,
      minSlides: 2,
      maxSlides: 2,
      slideMargin: 10
    });
  });

HTML:

  <div class="slider2">
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
    <div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
  </div>

Here we want to always display 2 slides no matter the screen size. Therefore we set both minSlides and maxSlides to 2. Resize your browser to see that no matter how large or small the screen becomes, 2 slides are always displayed.

Example #3: Too large slideWidth

JS:

  $(document).ready(function(){
    $('.slider3').bxSlider({
      slideWidth: 2000,
      minSlides: 2,
      maxSlides: 4,
      slideMargin: 10
    });
  });

HTML:

  <div class="slider3">
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar9"></div>
    <div class="slide"><img src="http://placehold.it/500x150&text=FooBar10"></div>
  </div>

Here we intentionally set a slideWidth larger than the available space. In this case, the slider defaults to the minSlide value, and scales appropriately.

Example #4: Move number of slides (moveSlides)

JS:

  $(document).ready(function(){
    $('.slider4').bxSlider({
      slideWidth: 300,
      minSlides: 2,
      maxSlides: 3,
      moveSlides: 1,
      slideMargin: 10
    });
  });

HTML:

  <div class="slider4">
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar9"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar10"></div>
  </div>

Here we see a new setting: moveSlides. This tells the carousel to move y slides each time next / prev is fired. If no value is supplied for moveSlides, the carousel will use the number of visible slides for this value.

Example #5: Infinite carousel with odd number of slides

JS:

  $(document).ready(function(){
    $('.slider5').bxSlider({
      slideWidth: 300,
      minSlides: 3,
      maxSlides: 3,
      moveSlides: 3,
      slideMargin: 10
    });
  });

HTML:

  <div class="slider5">
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar9"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar10"></div>
  </div>

Here we have implemented an infinite carousel (continues to first slide after reaching the last slide). However, we are moving 3 slides at a time, but we only have 10 slides. When this occurs, the carousel will always return to slide 1, even if it does not follow the moveSlides setting. This is done so that we can achieve a truly infinite carousel that will not break due to an uneven slide quantity.

Example #6: Start on a different slide

JS:

  $(document).ready(function(){
    $('.slider6').bxSlider({
      slideWidth: 300,
      minSlides: 2,
      maxSlides: 3,
      startSlide: 2,
      slideMargin: 10
    });
  });

HTML:

  <div class="slider6">
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar9"></div>
    <div class="slide"><img src="http://placehold.it/300x150&text=FooBar10"></div>
  </div>

This is a tricky one :) Here we specify a startSlide value of 2. This can be a little misleading as this does not refer to slide #2, but it refers to pager #2. Since slides and pagers are zero-based, we are telling the carousel to start on the thrid pager (remember that 2 in a zero-based world is the third element). Similar to the moveSlides explanation above, this occurs so that the carousel can stay in sync with the pager and prevents the markup from becoming unweildy.

Example #7: Not enough slides

JS:

  $(document).ready(function(){
    $('.slider7').bxSlider({
      slideWidth: 200,
      minSlides: 4,
      maxSlides: 5,
      slideMargin: 10
    });
  });

HTML:

  <div class="slider7">
    <div class="slide"><img src="http://placehold.it/200x150&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/200x150&text=FooBar2"></div>
  </div>

Here we have intentionally not provided enough slides to fill our requirements. In this case, the carousel will simply use the number of existing slides as the minSlide value, and continue as usual.

Example #8: Vertical carousel

JS:

  $(document).ready(function(){
    $('.slider8').bxSlider({
      mode: 'vertical',
      slideWidth: 300,
      minSlides: 2,
      slideMargin: 10
    });
  });

HTML:

  <div class="slider8">
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar1"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar2"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar3"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar4"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar5"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar6"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar7"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar8"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar9"></div>
    <div class="slide"><img src="http://placehold.it/300x100&text=FooBar10"></div>
  </div>

Vertical carousels follow most of the same rules as horizontal carousels. However, the maxSlides setting is not used as vertical carousels will always have only one slide across. Therefore, we do not have to accomodate different screen widths with this setting.

Carousels De-mystified

Quick glance

Example #1: Standard responsive carousel

JS:

HTML:

slideWidth

minSlides / maxSlides

slideMargin (optional)

Example #2: Locked number of slides

JS:

HTML:

Example #3: Too large slideWidth

JS:

HTML:

Example #4: Move number of slides (moveSlides)

JS:

HTML:

Example #5: Infinite carousel with odd number of slides

JS:

HTML:

Example #6: Start on a different slide

JS:

HTML:

Example #7: Not enough slides

JS:

HTML:

Example #8: Vertical carousel

JS:

HTML:

Examples

Would you mind disabling your adblocker?