Carousel

By Timothy FosterTimothy Foster

Description

Twitter's Bootstrap comes with image carousel functionality built in. This snippet allows you to generate carousels very quickly and easily so that you do not have to look up or memorize Bootstrap's syntax.

This snippet will only work on Boostrap enabled sites! Want a Boostrap site? See the Standard Template for more info.

If you are not using a Bootstrap site, you can use an alternate method. Go to this link, fill in the fields you need to use (following the same rules as listed below), and save the page. When the page loads, you will see a working carousel. To use it, scroll to the bottom of the carousel where you will find an embed code. Copy and paste that embed code into your site.

Syntax

Attribute Default Value Description
id Required! A unique id that identifies the carousel. This name should not belong to any other carousel on the page.
interval 5000 The time between the automatic image slides in milliseconds. If you set this to false, then images will not transition automatically, waiting for user input instead.
pause hover The mouse action that defines when the carousel is paused.
wrap true The carousel will continue to run even when it hits the end; it will stop if set to false.
indicators showing If you set this to hidden, the image indicators that allow you to hop immediately to certain images will become invisible
imageMain Required! The primary image for the carousel. This will show first upon page load.
imageMainAlt Not Available Text message that appears if the main image is unavailable.
imageMainCaption nothing Message that appears under the main image
image01 nothing Another image on the carousel.
image01Alt Not Available Text message that appears if the image is unavailable.
image01Caption nothing Message that appears under the image
image02 Same as above
image02Alt
image02Caption
image99
image99Alt
image99Caption Supports up to 100 images

Important Note! In order for the carousel to function properly, you must use consecutive image numbers! In other words, avoid defining images for 03, 08, and 21 without anything else in between. Use the proper numerical order (01, 02, 03, etc). There isn't a problem if you have indicators set to hidden.

Code

[[include :snippets:carousel
|id=my-carousel
|interval=6000
|imageMain=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image01=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image01Caption=+++ Title
This is a test
|image02=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image03=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
|image04=http://timothyfoster.wdfiles.com/local--files/filestore:testimage/testImage.png
]]

In action

You can see a live example at this link.


Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by Timothy Foster

Modal Image - 01 May 2015 17:20
Bootstrap Image Box - 19 Jul 2014 01:27
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Toggle Tag - 19 Jul 2013 11:13
Hide Tags - 14 Feb 2013 21:35
Plurality Checker - 16 Jul 2012 03:21
Mini Chat Area - 15 May 2012 12:04
Table Alterations - 16 Feb 2012 01:45
Fancy <hr> Dividers - 15 Feb 2012 00:51


Rate this solution

If you think this solution is useful — rate it up!

rating: +4+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License