Bootstrap Carosel

Directions.md

Template:Slide

Minimal Call

{{slide|id=your_unique_id|img1=image.png|img2=image.png}}

Optional Parameters

Image Captions

SEMICOLON IS DELIMITER

{{slide|id=your_unique_id|img1=image.png; CAPTION|img2=image.png}}

Width, Class, Interval

{{slide  
| id        = 		<!-- MUST BE UNIQUE -->  
| width     =		<!-- Optional: Default 100% -->  
| class     =		<!-- Optional: floatright or pullright -->  
| interval  =		<!-- Optional: If undefined, carousel will not automatically cycle  -->  
| img1      =  
| img2      =   
| img3      =  		<!-- Two Images Required -->  
| img4      =  
| img5      =  
| img6      =  
| img7      =  
| img8      =  
| img9      =  
| img10     =  
}}  

Template:trim

{{{{{|safesubst:}}}#if:1|{{{1|}}}}}

Template:arg1

{{#explode:{{{1}}}|;|0}}

Template:arg2

{{#explode:{{{1}}}|;|-1}}

behavior.js

$('.carousel.slide').each(function() {

		$('div.carousel').nextAll('pre').remove();
		var caro_id = $(this).data('caro-id');

		$('.carousel-control.left').click(function() {
		  $('#'+caro_id).carousel('prev');
		});

		$('.carousel-control.right').click(function() {
		  $('#'+caro_id).carousel('next');
		});
});
	
$(function() {
    $(".carousel-inner img").each(function() {
        var a = $('<a/>').attr('href', this.src).attr('rel', 'group').attr('class', 'image');
        $(this).wrap(a);
    });
});
	

Tempalte:Slide

<noinclude>
<pre>
{{slide
| id        = 		<!-- MUST BE UNIQUE -->
| width     =		<!-- Optional: Default 100% -->
| class     =		<!-- Optional: floatright or pullright -->
| interval  =		<!-- Optional: If undefined, carousel will not automatically cycle  -->
| img1      =
| img2      = 
| img3      =  		<!-- Two Images Required -->
| img4      =
| img5      =
| img6      =
| img7      =
| img8      =
| img9      =
| img10     =
}}
</pre>
</noinclude><div {{#if:{{{class|}}}|class="{{{class}}}"|}} style="width:{{{width|100%}}};"><div id="{{anchorencode:{{{id}}}}}" class="carousel slide" data-ride="carousel" data-interval="{{#if:{{{interval|}}}|{{{interval}}}|}}" data-caro-id="{{anchorencode:{{{id}}}}}"><ol class="carousel-indicators"><li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="0" class="active"></li><li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="1"></li>{{#if: {{{img3 |}}}|<li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="2"></li>|}}{{#if: {{{img4 |}}}|<li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="3"></li>|}}{{#if: {{{img5 |}}}|<li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="4"></li>|}}{{#if: {{{img6 |}}}|<li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="5"></li>|}}{{#if: {{{img7 |}}}|<li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="6"></li>|}}{{#if: {{{img8 |}}}|<li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="7"></li>|}}{{#if: {{{img9 |}}}|<li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="8"></li>|}}{{#if: {{{img10 |}}}|<li data-target="#{{anchorencode:{{{id}}}}}" data-slide-to="9"></li>|}}</ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="{{filepath:{{trim|{{arg1|{{{img1}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img1}}}}}}}</div></div><div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img2}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img2}}}}}}}</div></div>{{#if: {{{img3 |}}}|<div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img3}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img3}}}}}}}</div></div>|}}{{#if: {{{img4 |}}}|<div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img4}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img4}}}}}}}</div></div>|}}{{#if: {{{img5 |}}}|<div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img5}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img5}}}}}}}</div></div>|}}{{#if: {{{img6 |}}}|<div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img6}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img6}}}}}}}</div></div>|}}{{#if: {{{img7 |}}}|<div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img7}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img7}}}}}}}</div></div>|}}{{#if: {{{img8 |}}}|<div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img8}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img8}}}}}}}</div></div>|}}{{#if: {{{img9 |}}}|<div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img9}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img9}}}}}}}</div></div>|}}{{#if: {{{img10 |}}}|<div class="item"><img src="{{filepath:{{trim|{{arg1|{{{img10}}}}}}}}}" alt=""><div class="carousel-caption">{{trim|{{arg2|{{{img10}}}}}}}</div></div>|}}</div><div class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></div><div class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></div></div></div>