Description
A custom post type for choosing images and content which outputs a carousel from Twitter Bootstrap using the shortcode [sx-carousel].
The plugin assumes that you’re already using Bootstrap, so you need to load the Bootstrap javascript and CSS separately.
If you’d like to contribute to this plugin, you can find it hosted on GitHub.
Shortcode Options
If you’d like different settings for different carousels, you can override these by using shortcode options…
-
interval(default 5000)- Length of time for the caption to pause on each image. Time in milliseconds.
[sx-carousel interval=”12000″]
- Length of time for the caption to pause on each image. Time in milliseconds.
-
showcaption(default true)- Whether to display the text caption on each image or not.
trueorfalse.
[sx-carousel showcaption=”false”]
- Whether to display the text caption on each image or not.
-
showcontrols(default true)- Whether to display the control arrows or not.
trueorfalse.
[sx-carousel showcontrols=”false”]
- Whether to display the control arrows or not.
-
orderbyandorder(defaultmenu_orderASC)- What order to display the posts in. Uses WP_Query terms.
[sx-carousel orderby=”rand”]
[sx-carousel orderby=”date” orderby=”DESC”]
- What order to display the posts in. Uses WP_Query terms.
-
category(default all)- Filter carousel items by a comma separated list of carousel category slugs.
[sx-carousel category=”homepage,highlights”]
- Filter carousel items by a comma separated list of carousel category slugs.
-
id(default all)- Specify the ID of a specific carousel post to display only one image.
- Find the image ID by looking at the edit post link, eg. post 109 would be
/wp-admin/post.php?post=109&action=edit
[sx-carousel id=”109″]
-
twbs(default 2)- Output markup for Twitter Bootstrap Version 2 or 3.
[sx-carousel twbs=”3″]
- Output markup for Twitter Bootstrap Version 2 or 3.
Contributing
If you would like to contribute to this plugin, please go to the GitHub repository and make a personal fork of the development version. You can then make your changes and submit a pull request. I will happily review the code and then merge when we’re both happy. You can read more details here.
Screenshots
Installation
The easy way:
- Go to the Plugins Menu in WordPress
- Search for “SX Bootstrap Carousel”
- Click ‘Install’
- Activate the plugin
Manual Installation
- Download the plugin file from this page and unzip the contents
- Upload the
sx-bootstrap-carouselfolder to the/wp-content/plugins/directory - Activate the
sx-bootstrap-carouselplugin through the ‘Plugins’ menu in WordPress
Once Activated
- Make sure that your theme is loading the Twitter Bootstrap CSS and Carousel javascript
- Place the
[sx-carousel]shortcode in a Page or Post - Create new items in the
Carouselpost type, uploading a Featured Image for each.- Optional: You can hyperlink each image by entering the desired url
Image Link URLadmin metabox when adding a new carousel image.
- Optional: You can hyperlink each image by entering the desired url
FAQ
-
This can be caused by having your jQuery and Bootstrap javascript files included in the wrong place.
- Make sure that jQuery is only being included once
- Make sure that the Bootstrap javascript file is being included after jQuery
- NB: This often means putting it after
wp_head()in your theme’sheader.phpfile
- NB: This often means putting it after
- Make sure that both jQuery and Bootstrap are being included in the theme header, not footer
- Make sure that the Bootstrap javascript file is referenced after the jQuery file.
-
First of all, install and activate the plugin. Go to ‘Carousel’ in the WordPress admin pages and add some images. Then, insert the carousel using the
[sx-carousel]into the body of any page. -
Absolutely – you just need to use the do_shortcode WordPress function. For example:
-
This happens when the carousel is bigger than your images. Either upload higher resolution images, or select the “Use background images?” option in the settings (this will stretch the images though, so they may get a little blurry).
-
You can specify the order that the carousel displays images by changing the setting in the Settings page, or by using the
orderbyandordershortcode attributes. The settings page has common settings, or you can use any terms described for the WP_Query orderby terms for the shortcode. -
Yes – create a few categories and add your specific images to a specific category. Then, when inserting the shortcode into the page, specify which category you want it to display images from using the
categoryshortcode attribute. -
The carousel shortcode has a number of attributes that you can use to customise the output. These are described on the main plugin Description page.
-
- Is the plugin installed and activated?
- Have you added any items in the
Carouselpost type? - Have you placed the
[sx-carousel]shortcode in your page?
Try writing the shortcode using the ‘Text’ editor instead of the ‘Visual’ editor, as the visual editor can sometimes add extra unwanted markup.
-
Is your theme loading the Bootstrap CSS and Javascript? (look for
bootstrap.cssin the source HTML) -
You need to make sure that each image is the same height. You can do this by setting an
Aspect ratioin theEdit Imagesection of the WordPress Media Library and cropping your images.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“SX Bootstrap Carousel” is open source software. The following people have contributed to this plugin.
Contributors
Translate “SX Bootstrap Carousel” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0
- Initial release
