Free WordPress Image Gallery Plugin – Bootstrap Mobile Swipe Carousel

Get The Plugin – V1.0

This is a plugin from the our IBH dev team that adds in a Bootstrap carousel image display to

or [bt_carousel] shortcode tags in WordPress with mobile jQuery swipe enabled.

It is a lightweight plugin based on the Bootstrap resource library. Because it depends on Bootstrap, the plugin will load in the library unless you specify it not to do so. You can modify that in the settings panel. Only disable the Bootstrap library load if you ALREADY have Bootstrap 3.0 running on your WordPress theme. If not, the plugin will not work. We made this plugin to specifically address a need to retroactively apply a mobile-first, swipe-enabled, Bootstrap-driven image carousel that worked off of existing WordPress galleries emplaced in post content with the

shortcode. Using this plugin means you can instantly convert all of your shortcodes to become mobile-swipe enabled Bootstrap image carousels.

For example, if you have a WP gallery in your post that looks like this: the plugin will render it properly to show as a Bootstrap mobile-swipe carousel.

If your pre-existing gallery shortcode is more ‘complicated’ don’t worry; all the plugin looks for is the gallery shortcode and the image ids. It can handle something like this: without issue.
If you do NOT want the plugin to hijack your existing

shortcodes we have an option in the panel to use the unique [bt_carousel] shortcode instead.
To use the unique shortcode [bt_carousel] in the plugin you currently have to create the image gallery natively in your WordPress post, then embed it in your post with the shortcode, and simply replace the “gallery” text in the shortcode with “bt_carousel.”

Essentially, change something like this: to this [bt_carousel ids=”13622,13623,13624,13625,13626,13621″] and you will have it render successfully.

Version 1.1 hopefully will have a method from the gallery build dialogue in WP to embed it with the shortcode name directly.

But since this was not the primary focus of the plugin, and only an added optional feature for those situations the user didn’t want to replace all galleries on the site with this plugin, we did not spend dev time on completing that method yet.

WordPress Bootstrap Gallery Plugin Installation

• Upload the plugin files to the `/wp-content/plugins/plugin-name` directory, or install the plugin through the WordPress plugins screen directly.
• Activate the plugin through the ‘Plugins’ screen in WordPress
• Use the Settings->Bootstrap Mobile Swipe Carousel screen to configure the plugin

The plugin will automatically convert all

shortcodes to the new Bootstrap image carousel version on installation.

You do not need to do anything to make that happen other than activate the plugin. But if you want to turn off mobile swipe, Bootstrap resource load, or use an alternative shortcode for the gallery, go to the plugin options screen.

Frequently Asked Plugin Questions

How do I make a new gallery?

You create them using the native WordPress gallery tool in the page/post edit panel. Just click on “Add Media” and then “Create Gallery” and select your images, then embed that code in your post where you want this Bootstrap image carousel to show up, and it will appear.

What if I only want to use this on some posts?

You can do that, just select the option in the plugin settings to use the alternative shortcode [bt_carousel] and only galleries with that shortcode name will be rendered as Bootstrap carousel galleries.

How do I change the style of the carousel?

This plugin uses the native CSS classes from the Bootstrap carousel method. In style.css for your theme, or using a CSS editor plugin, you can restyle the classes accordingly.

Main container classes are: class=”carousel slide”

Wrapper for images are: class=”carousel-inner”

Individual images are contained in: class=”item”

Circle indicators are: class=”carousel-indicators”

The arrow controls are: class=”left carousel-control” class=”right carousel-control”

I got it turned on and all my image galleries just show full size images stacked on top of each other.

You might have disabled the Bootstrap resource library (go check your settings for the plugin), or have an older Bootstrap version loading in your theme, or have a conflict with another plugin not allowing the carousel resources to load. Try turning off all other plugins and see if the problem occurs, then turn plugins on one by one to find the conflict. If you get a plugin conflict confirmed, please post that in the support forum so we can know to de-conflict on future versions!