JS:
$('.slider1').mbSlider({
slideWidth: 200,
minSlides: 2,
maxSlides: 3,
slideMargin: 10
});
});
HTML:
<div class="slider1">
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=7893893749"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=5584098948"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=4035797764"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=9734385435"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=2033205696"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=9833584948"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=2387732802"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=3467453513"></div>
<div class="slide"><img src="https://unsplash.it/1280/720?random&p=7907614266"></div>
</div>
In order to setup a responsive carousel, we need to supply three values:
slideWidthmaxSlidesminSlides
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.