This is a sample showing how to configure the Bootstrap 3 carousel to show many panels at once but only slide one at a time.
I have put these up on two popular interactive playgrounds:
This is a modification to the standard Bootstrap carousel which lets you show four panels at once but only slides them along one panel at a time. Check out one of the demos above to get more of a feel for the effect.
It is responsive and modifies the number of panels shown at a time on smaller screens.
I found the original concept on Bootply but unfortunately tracing it back as far as the thread went back to one that started out with an anon post. This version is now almost a complete rewrite and incorporates many fixes but I do owe credit to the unknown author that made the original breakthrough.
This version has been updated to fix animation bugs and make it compatible with Bootstrap again now that it has moved to using css transitions for its animations.
I've added in a Less stylesheet which means you can easily update the container name and make changes to the numbers of columns (guide in the wiki).
I've also optimised the JavaScript code to remove redundant calls and wrap it up safely.
You should take some time to learn them but I'm not going to make you do it right now just so that you can use this in your project!
Your best bet is to load up the sample on CodePen
- Copy the html and JavaScript over to your project
- In the CSS (Less) panel look in the top right for a small eye symbol. Clicking this will compile the Less into CSS so you can use it without having any special software installed.
You can install a copy of this by typing this into your command line terminal:
> git clone https://github.com/rtpHarry/Bootstrap3-ShowManySlideOneCarousel.git
Download the latest release from GitHub
If you make some tweaks to the JavaScript or Less files you can quickly regenerate them.
Using your command line terminal, navigate to the folder that has the gruntfile.js/package.json in. Enter the following command:
> grunt dev
To generate the unminimised JS and CSS files with a CSS source map for debugging, or
> grunt dist
To create the minified versions.
You will find the project files in the /dist/ folder.
This is quite easy but it involves editing both the LESS/CSS and the JS files so I have put this in a wiki item:
I've tested it in:
- Chrome 41
- Firefox 36.0.4
- Internet Explorer 11
If you have feedback, please open an issue or initiate a pull request. I'm happy to make improvements where possible.
There is a blog post announcing this but all the information you need is in this repo:
v1.0 - 27-Mar-2015 - Initial release
This software is released under the MIT License.
I just picked it because its an unrestrictive one but as this is based in part on Bootstrap I think I might be tied to it. If this causes issues with your project please open an issue on GitHub and we can look into it.