Hit enter after type your search item

A Bootstrap multi item carousel template

Multi item Bootstrap carousel template

This slider template is the continuation of HTML 5/ CSS 3 product template that was used in the previous part.

In this template, I have displayed items in the Bootstrap multi-item carousel by using the carousel plug-in. The color scheme is also changed for product / item or current work for titles along with rest of the boxes.

In full-screen mode, four products are displayed at a time. As the screen becomes smaller, the carousel will slide only three products. In the smartphones, only a single item is displayed at a time.

Bootstrap product carousel

Live Preview Download Code

You may use this component to display products in sliding manner along with an option to place the order.  Similarly, this free Bootstrap carousel template can be used to display catalogs, portfolio items etc.

The carousel component is displayed with an animation which is done by using the wow animation plug-in. (The download package includes JS and CSS files).

Feel free to change the color schemes as per the rest of the theme of your website project. For that, you simply need to change a few CSS classes like:

To change the background of the main container, find ourbkground class in CSS file and change its HEX value. The inner container is using the innerbkground class.

The boxes section where product name and image is shown is dealt in the mainbox CSS class. Just go through other classes and amend as per need or use as it is.

The markup code for this carousel is as below:


To get complete files or view the demo online follow the links below:

Live Preview Download Code

The downloaded package also contains the main CSS file, markup, wow plugin, jQuery and Bootstrap libraries.

If you liked this free template, then feel free to share the link at programming forums, stackoverflow or other sites.

This div height required for enabling the sticky sidebar