-
Notifications
You must be signed in to change notification settings - Fork 32
Change the number of slides visible at any one time
This article will take you on a guided tour of the source. It will show you where the pinch points are to make the customisations and explain the underlying concepts behind the slider. You will see that editing this sample to work for your websites needs is simple, requiring only four modifications.
By default the code shows 4 panels on desktop, 2 on tablet and 1 on mobile. You can change these though by tweaking a few of the key values.
My aim for this project was to make it easy for developers to see how it works and what was needed to be done so it could be customised. This is why it isn't packaged up as a strict 4 panel slider plugin. To enable the carousel to show a different number of panels you will need to make changes in the html, css and js.
The best thing to do is to open up the CodePen, sign up or in and then Fork a copy of it using the button along the top.
When you are looking at the four panels sliding across your screen, one by one, you are actually looking at a row of clones. When the script starts up it finds the first .item and clones the next three items contents into it. Then it repeats that process for every .item.
The animation you see is the slide moving 25% over. At this point the original .item has moved left off the screen but the the three leftover cloned items can still be seen "poking out" to the right as slots 1, 2 and 3. At the same time the animation started the next slide appeared in the background with its starting position 25% over to the right. It moved in sync with the top slide. So for a brief second at the end of the animation you see the three cloned items on top plus the fourth item on the right is the underlying slide. Because the new slides match the old slide it simply hides the old slide and the user cannot tell, they just now see the complete new slide and the process starts over again.
Right click on one of the slides, choose Inspect and you will see what's going on.
In the example you see that each slide has markup like this:
<div class="item">
<div class="col-xs-12 col-sm-6 col-md-3">
<a href="#"><img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></a>
</div>
</div>
Bootstrap has 12 columns so col-md-3 means you fit:
12 columns / 3 column wide slide = 4 columns will fit on the desktop view
The same calculations hold true for the col-sm-6; it fits two columns per view on tablets and col-xs-12 fits one full width column on mobile.
Lets change it so we see 6 slides on desktop, 3 on tablet and still a simple 1 on mobile:
12 / 6 = col-md-2
12 / 3 = col-sm-4
12 / 1 = col-xs-12
In the html pane, find all the classes in the #carousel123 carousel that look like this:
<div class="col-xs-12 col-sm-6 col-md-3">
and change them to this:
<div class="col-xs-12 col-sm-4 col-md-2">
As you copy and paste this don't forget that one of the .items has to have an .active class or Bootstrap won't like it. I have already set this on the first .item so make sure you don't copy over it.
Side note: The clone actually clones the
:first-childof what's inside the.item. If you change this totally for your own site then make sure you wrap each slide in a container or it might not clone everything correctly.
At this point I have a block of carousel markup that looks like this:
<div class="carousel carousel-showmanymoveone slide" id="carousel123">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4 col-md-2"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2"><a href="#"><img src="http://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2"><a href="#"><img src="http://placehold.it/500/002040/eeeeee&text=4" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2"><a href="#"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2"><a href="#"><img src="http://placehold.it/500/002d5a/fff/&text=6" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2"><a href="#"><img src="http://placehold.it/500/eeeeee&text=7" class="img-responsive"></a></div>
</div>
<div class="item">
<div class="col-xs-12 col-sm-4 col-md-2"><a href="#"><img src="http://placehold.it/500/40a1ff/002040&text=8" class="img-responsive"></a></div>
</div>
</div>
<a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
Ok let's take a tour of the markup this project uses. There are a quite a few lines but they mostly just repeat the same things for different responsive widths. The code is mobile-first, like Bootstrap. The mobile version uses 100% width so it doesn't actually need any rules. Then comes the @screen-sm-min 768px rules, followed by the @screen-md-min 992px and above rules.
Lets do the 992px first as it's what we did last time. The new number that you are going to use requires a snippet of math. Take a look at this snippet of the 992px section of the Less (trimmed down for brevity):
@media all and (min-width: 992px)
> .item.next
{
transform: translate3d(25%, 0, 0);
}
The core number you will see throughout this section is all 25, some are +25 some are -25 but the digits are the same. To calculate the new number you need to make this calculation:
100 (total width in percent) / 6 (number of desired items to display) = 16.666
So replace each of the 25's in this section with 16.666 as we only want the slide to move over 16.666% each time. Don't forget, some of the numbers have a - at the start, keep the - in place, it's for when your users click the move left (back) button.
Then do the same for the @screen-md-min section (min-width: 768px). Its key number is 50%, eg two slides originally and we want to show three slides now so:
100 (total width in percent) / 3 (number of desired items to display) = 33.333
Edit each of the 50 instances to say 33.333.
Each time you made a change to the CodePen it will have reloaded the sample window at the bottom. You might have noticed that the animation was all over the place before. Look at it now and you have an almost working 6 item carousel! The only problem is you're just seeing four of them slide along at a time still.
Line 13 in the JavaScript source looks like this:
for (var i=1;i<4;i++) {
The 4 is the number of extra slides to clone so update it to 6.
Great! It looks like we have a working show-six-move-one carousel! There is one problem though. Scale the preview window down so it pops to a smaller view and you will see extra, unwanted slide .items sitting underneath. This is what the .cloneditem-n classes are for. You will need to add handlers for .cloneditem-4 and .cloneditem-5.
What exactly are these? Go back the CSS window and scroll down through it. You will see that each of the three responsive breakpoints do some cloneditem-n management. To start off with they are all hidden - we don't want any extra cloned slides visible in the single item mobile slider. Edit the block of css at line 19 to include the new extra cloned items:
.cloneditem-1, .cloneditem-2, .cloneditem-3, .cloneditem-4, .cloneditem-5 { display: none; }
The numbers are off-by-one because for a six item slide we only clone an extra 5 items to fill it out.
Now scroll to line 76. The @screen-sm-min size should show 3 slides so that's original plus two clones. This means changing this snippet to:
.cloneditem-1,
.cloneditem-2
{
display: block;
}
Notice, instead of hiding them we are now setting them to display.
Last section for @screen-md-min size is to show all of the extra clones. We don't need to specify them all though because css is cascading. The rules from the @screen-sm-min are still being applied. Go to line 128 and replace the block with this so that the last three cloned items are displayed:
.cloneditem-3,
.cloneditem-4,
.cloneditem-5
{
display: block;
}
Good work, you have a fully working, responsive show six move one carousel. Just need to quickly tidy the code up in the next section and you are done.
At the top of the Less file it wraps all of the styles in a .carousel-showmanymoveone. Originally I did this so that the code wouldn't clash with other Bootstrap carousels that you might have on the page. Now that you have customised this code to show six move one we should do the same namespacing here - so that you (or your users) don't clash with the original show four move one carousel.
You can see an example of why this is needed by scrolling down and looking how confused the second carousel test is at the bottom of the sample. Fix it by renaming the container at these three pinch points:
- Less: Rename the
.carousel-showmanymoveoneto whatever you like eg.carousel-showsixmoveone(line 1 in the sample) - JS: Rename the single instance of
.carousel-showmanymoveoneto your new name (line 10 in the sample) - HTML: Rename the single instance of
.carousel-showmanymoveonethat wraps your carousel (line 12 in the sample)
If you haven't been following along on with this wiki on CodePen you can see a glorious demo of what we just made by clicking here:
Because of all the changes that are required it would have taken a big scaffolding project or needed us to use JavaScript to manage the generation of the CSS. I felt this was adding needless complexity to the project.
The article is quite long but that's because we took an annotated tour through the code to get a better understanding of the rationale and the structure of what you're tweaking rather than blindly plugging in values where I say to.
If you need to modify this again then all you really need to remember are the four key elements:
- Update the html classes for responsive rules
- Update the css item widths
- Add in the required
.cloneditem-nmanagement - Tweak the js loop to control the number of cloned items
Again, I wish I could have given credit to the original author that figured out this core technique but it seems they added it to Bootply anonymously. So thank you to the unknown author and I hope you find great ways to use this in your next website!