Bootstrap Carousel Builder

Loading...
HTML
CSS

What is it?

Quickly build and style the default Twitter Bootstrap 3 Carousel. Although Bootstraps Carousel already come with a default style, sometimes it is just nice to have a styled slideshow on your site.

Start from the default Twitter Bootstrap style and then just add the slideshow items and styles that will suit your site.

Some features, like gradient, border radius and font icons, might not be available in older browsers.

Along with the default styles, you also have a few extra options, such as:

  • 2 types of indicators styles with multiple positions
  • 7 different caption styles
  • 8 control styles with 3 different icons

Instructions

In 2 easy steps, you can create 1000's of different style combinations for your Twitter Bootstrap Carousel and then copy the CSS classes to your stylesheet.

  1. Add carousel slides
  2. Select styles

Keyboard Shortcuts

I love keyboard shortcuts, so I have setup some different keyboard shortcuts, to make it quicker to navigate the various screens. Below you can see how to use them.

Main Screen

  • CTRL + SHIFT + B, shows the Builder tab.
  • CTRL + SHIFT + P, shows the Preview popup.
  • CTRL + SHIFT + H, shows the HTML tab.
  • CTRL + SHIFT + C, shows the CSS tab.
  • CTRL + SHIFT + S, shows the Slide Items builder tab.
  • CTRL + SHIFT + I, shows the Indicator styles tab.
  • CTRL + SHIFT + T, shows the Caption styles tab.
  • CTRL + SHIFT + N, shows the Controls styles tab.
  • CTRL + SHIFT + E, shows the Miscellaneous tab.
  • CTRL + SHIFT + F, resizes the workspace.
  • CTRL + SHIFT + A, selects all the HTML or CSS code, when on the appropriate tab. Then you can just use the usual CTRL or CMD + C to copy the code to your code editor.

Popup Screen

  • CTRL + 1, shows the mobile size.
  • CTRL + 2, shows the table size.
  • CTRL + 3, shows the desktop size.
  • CTRL + 4, shows the auto (full fluid width) size.

Credits

Photos were downloaded from Stock.xchng, a direct link to each photo, can be found below.