126

Product support

Visit this product's website for support.

Categories

If you liked my plugin and would like to show quantifiable gratitude, donate and I’ll bring in more good plugins.
Add Twitter Bootstrap carousels to your web apps easily.

Features

  • Easy to use
  • Quick setup
  • Responsive Design
  • Built for Twitter Bootstrap
  • Supports captioning and sub - captioning.

This plugin uses Twitter Bootstrap's Carousel component to generate the image sliders. You can find more documentation about this here.

How to add this to your website

  1. Create a new carousel image set in the carousels page (Found under CMS category of the Backend Settings page) and upload the photos.
  2. You may add Title and Description to each photo (This will appear as caption and sub-caption) in the front end.
  3. In the CMS page, find the component named Carousel found under the Bootstrap Carousel section of your components section and drag it into the code of your page or layout where you would like the photo slider to appear.
  4. In the added component's properties dropdown, select the carousel image-set which you would like to use. By default, the first available carousel set should be selected.

Presto! You're all set and you can now see the carousel in your web app!

Dependency

Make sure you have Twitter Bootstrap's Carousel used in your theme. You can find a copy of it in the October demo theme in the asset/vendor/bootstrap/less folder. You may also get the required files from Twitter Bootstrap website. For a bare minimal version of bootstrap with just Carousel, click on toggle all in the LESS section and make sure only Carousel is selected, scroll to the JQuery plugins section and do the same and make sure Carousel functionality is selected. There is no need for further customization, you may scroll to the bottom of the page and click Compile and Download. Once the files are downloaded copy the files css and js files into their respective places in your theme assets folder. It is enough to take bootstrap.css from the css folder and bootstrap.js from the js folder.

Now include the files in your theme by adding it to your theme's layout.

  <link href="{{ [
      'assets/css/bootstrap.css'
  ]|theme }}" rel="stylesheet" />

These lines go just above the closing head tag.

  <script src="{{ [
      'assets/js/bootstrap.js'
  ]|theme }}" />

These lines go just above the closing body tag.

There is no need to use the minified version of these files as OctoberCMS does this automatically for you when used in production.

An alternative way to include bootstrap is to add the CDN version of the files. To do that include these lines to your theme's layout.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

This line goes just above the closing head tag.

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

This line goes just above the closing body tag.

  • Found the plugin useful on 29 Oct, 2018

    Great Work! Please add Bootstrap 4 Support. As a Workaround replace in file plugins\mohsin\carousel\components\carousel\default.html in line 13 <div class="item by: <div class="carousel-item

  • Found the plugin useful on 2 Dec, 2017

    Optional Bootstrap 4 support would be nice.

  • Found the plugin useful on 30 Jun, 2017

    The plugin works great for my project. Its a simple slider. Easy to understand. Thank you

  • author

    Replied on 30 Jun, 2017

    Good to hear that. Thank you for the review.

  • Found the plugin useful on 29 Mar, 2017

    Just what I need! Thank you!

  • Found the plugin useful on 8 Jul, 2016

    Good plugin, just can't find the option to hide buttons/paginiation. Should I hide is manually?

  • Found the plugin useful on 6 Jun, 2016

    This is a great slider! Is there a way to add the slider component in the back-end though? I wanted to use this plugin on the homepage, but outside of the content up in the banner... thank you for any input!

  • Found the plugin useful on 11 Jan, 2016

    Great stuff thanks :) (Touch support for bootstrap carousel is easy to add with a library like Hammer.js : http://hammerjs.github.io/)

  • Found the plugin useful on 20 Jul, 2015

    one of the best sliders out there, if it had touch (drag etc) support it would easily be the best out there!

  • Found the plugin useful on 13 Jul, 2015

    It doesn't support adding images from media library, is it?

  • author

    Replied on 17 Jul, 2015

    No that feature is yet to be added. I made this plugin during a time when OctoberCMS did not have the media manager. Will add this feature later, thanks for the suggestion!

  • Found the plugin useful on 23 Apr, 2015

    Awesome work Saifur, I really appreciate this plugin! Looking forward to what is in stock for it in the future :-)

  • Found the plugin useful on 11 Apr, 2015

    Thanks for sharing it ! :) Quick suggestions : would be nice to remove h3 and captions on the carousel if there's no title, it mess with the website semantic :) Nice plugin !

  • author

    Replied on 12 Aug, 2015

    Thanks for the suggestion, I have done this. Hope you enjoy the plugin.

1.0.7

Caption is now available only if title or description was added. Thanks @Gabriele

Apr 21, 2017

1.0.6

Show caption only if there is image title or description

Apr 21, 2017

1.0.5

!!! Developer can now chose display carousels section in navigation menu or settings page.

Feb 06, 2017

1.0.4

Bug fix for multiple carousel components in same page.

Oct 08, 2016

1.0.3

Minor improvements.

Sep 02, 2015

1.0.2

Improved HTML semantics and language support.

Apr 11, 2015

1.0.1

First version of Carousel

Apr 08, 2015

Upgrading To 1.0.5

The update changes the internal permission code so if you have set permissions for backend users to manage the carousels section then you have to set it again.