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.

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.