Jonathan Afranio

Glider.js, Carousel in pure javascript (vanilla.js) for WP

Carrossel with Glider.js

Glider.js, Carousel in pure javascript (vanilla.js) for WP

Phil Ewels

A custom post type for choosing images and content which outputs a <a href="http://getbootstrap.com/javascript/#carousel" rel="nofollow ugc">carousel</a> from <a href="http://www.getbootstrap.com" rel="nofollow ugc">Twitter Bootstrap</a> using the shortcode <code>[image-carousel]</code>.
The plugin assumes that you’re already using Bootstrap, so you need to load the Bootstrap javascript and CSS separately.
<ul>
<li><a href="http://getbootstrap.com/" rel="nofollow ugc">Download Twitter Bootstrap</a></li>
<li><a href="http://www.bootstrapcdn.com/" rel="nofollow ugc">Bootstrap CDN</a> (hotlink CSS and javascript files)</li>
<li><a href="https://getbootstrap.com/docs/4.4/components/carousel/" rel="nofollow ugc">Bootstrap Carousel in action</a></li>
</ul>
This plugin is available from the WordPress Plugins Directory: <a href="https://wordpress.org/plugins/cpt-bootstrap-carousel/" rel="ugc">https://wordpress.org/plugins/cpt-bootstrap-carousel/</a>. 
The source code is maintained on GitHub: <a href="https://github.com/ewels/cpt-bootstrap-carousel" rel="nofollow ugc">https://github.com/ewels/cpt-bootstrap-carousel</a>.
<h4>Shortcode Options</h4>
As of version 1.5, nearly all of these options can be set in the CPT Bootstrap Carousel Settings page. However, if you’d like different settings for different carousels, you can override these by using shortcode options…
<ul>
<li>
<code>interval</code> (default 5000)
<ul>
<li>Length of time for the caption to pause on each image. Time in milliseconds.</li>
<li><code>[image-carousel interval="12000"]</code></li>
</ul>
</li>
<li>
<code>showcaption</code> (default true)
<ul>
<li>Whether to display the text caption on each image or not. <code>true</code> or <code>false</code>.</li>
<li><code>[image-carousel showcaption="false"]</code></li>
</ul>
</li>
<li>
<code>showcontrols</code> (default true)
<ul>
<li>Whether to display the control arrows or not. <code>true</code> or <code>false</code>.</li>
<li><code>[image-carousel showcontrols="false"]</code></li>
</ul>
</li>
<li>
<code>orderby</code> and <code>order</code> (default <code>menu_order</code> <code>ASC</code>)
<ul>
<li>What order to display the posts in. Uses <a href="https://codex.wordpress.org/Class_Reference/WP_Query#Order_.26_Orderby_Parameters" rel="nofollow ugc">WP_Query terms</a>.</li>
<li><code>[image-carousel orderby="rand"]</code></li>
<li><code>[image-carousel orderby="date" orderby="DESC"]</code></li>
</ul>
</li>
<li>
<code>category</code> (default all)
<ul>
<li>Filter carousel items by a comma separated list of carousel category slugs.</li>
<li><code>[image-carousel category="homepage,highlights"]</code></li>
</ul>
</li>
<li>
<code>id</code> (default all)
<ul>
<li>Specify the ID of a specific carousel post to display only one image.</li>
<li>Find the image ID by looking at the edit post link, eg. post 109 would be <code>/wp-admin/post.php?post=109&action=edit</code></li>
<li><code>[image-carousel id="109"]</code></li>
</ul>
</li>
<li>
<code>twbs</code> (default 2)
<ul>
<li>Output markup for Twitter Bootstrap Version 2 or 3.</li>
<li><code>[image-carousel twbs="3"]</code></li>
</ul>
</li>
</ul>
<h4>Credits</h4>
This plugin was written by @tallphil with help and suggestions from several others including (but not limited to) @reddo, @joshgerdes, @atnon, @grahamharper, @rchq, @oheijo, @smtk, @cla63, @cookierebes and @sipman.
The Serbo-Croation translation was kindly provided by Borisa Djuraskovic from <a href="http://www.webhostinghub.com" rel="nofollow ugc">http://www.webhostinghub.com</a>
The Spanish translation was provided by Chema Bescós from IBIDEM GROUP (<a href="https://www.ibidemgroup.com" rel="nofollow ugc">https://www.ibidemgroup.com</a>)
<h4>Contributing</h4>
If you would like to contribute to this plugin, please make a personal fork of the GitHub repository and then submit a pull request. For more details please see the <a href="https://github.com/ewels/CPT-Bootstrap-Carousel/CONTRIBUTING.md" rel="nofollow ugc">contributing guide</a>.

CPT Bootstrap Carousel

A custom post type for choosing images and content which outputs Bootstrap Image Carousel (slider) from the [image-carousel] shortcode.

Carrossel with Glider.js vs CPT Bootstrap Carousel