Template: Carousel
From LibrePlanet
(Created page with "<noinclude> This is the template "{{PAGENAME}}". This template will display Bootstrap Carrousel with five images (incl. titles and captions). It uses custom styling to enable...") |
|||
| (7 intermediate revisions by 2 users not shown) | |||
| Line 6: | Line 6: | ||
|Title1= | |Title1= | ||
|Caption1= | |Caption1= | ||
| + | |Link1= | ||
|Image2= | |Image2= | ||
|Title2= | |Title2= | ||
|Caption2= | |Caption2= | ||
| + | |Link2= | ||
|Image3= | |Image3= | ||
|Title3= | |Title3= | ||
|Caption3= | |Caption3= | ||
| + | |Link3= | ||
|Image4= | |Image4= | ||
|Title4= | |Title4= | ||
|Caption4= | |Caption4= | ||
| − | | | + | |Link4= |
| − | |||
| − | |||
}} | }} | ||
</pre> | </pre> | ||
| Line 29: | Line 30: | ||
<li data-target="#MyCarousel" data-slide-to="2"></li> | <li data-target="#MyCarousel" data-slide-to="2"></li> | ||
<li data-target="#MyCarousel" data-slide-to="3"></li> | <li data-target="#MyCarousel" data-slide-to="3"></li> | ||
| − | |||
</ol> | </ol> | ||
<!-- Carousel items --> | <!-- Carousel items --> | ||
| Line 35: | Line 35: | ||
<!-- Slide 1 : Active --> | <!-- Slide 1 : Active --> | ||
<div class="item active"> | <div class="item active"> | ||
| − | [[File:{{{Image1|}}}{{!}}class=img-responsive{{!}}link= | + | [[File:{{{Image1|}}}{{!}}class=img-responsive{{!}}link={{{Link1}}}]] |
<div class="carousel-caption"> | <div class="carousel-caption"> | ||
<h3>{{{Title1|}}}</h3> | <h3>{{{Title1|}}}</h3> | ||
| Line 43: | Line 43: | ||
<!-- Slide 2 --> | <!-- Slide 2 --> | ||
<div class="item "> | <div class="item "> | ||
| − | [[File:{{{Image2|}}}{{!}}class=img-responsive{{!}}link= | + | [[File:{{{Image2|}}}{{!}}class=img-responsive{{!}}link={{{Link2}}}]] |
<div class="carousel-caption"> | <div class="carousel-caption"> | ||
<h3>{{{Title|}}}</h3> | <h3>{{{Title|}}}</h3> | ||
| Line 51: | Line 51: | ||
<!-- Slide 3 --> | <!-- Slide 3 --> | ||
<div class="item "> | <div class="item "> | ||
| − | [[File:{{{Image3|}}}{{!}}class=img-responsive{{!}}link= | + | [[File:{{{Image3|}}}{{!}}class=img-responsive{{!}}link={{{Link3}}}]] |
<div class="carousel-caption"> | <div class="carousel-caption"> | ||
<h3>{{{Title3|}}}</h3> | <h3>{{{Title3|}}}</h3> | ||
| Line 59: | Line 59: | ||
<!-- Slide 4 --> | <!-- Slide 4 --> | ||
<div class="item "> | <div class="item "> | ||
| − | [[File:{{{Image4|}}}{{!}}class=img-responsive{{!}}link= | + | [[File:{{{Image4|}}}{{!}}class=img-responsive{{!}}link={{{Link4}}}]] |
<div class="carousel-caption"> | <div class="carousel-caption"> | ||
<h3>{{{Title4|}}}</h3> | <h3>{{{Title4|}}}</h3> | ||
| Line 65: | Line 65: | ||
</div><!-- /.carousel-caption --> | </div><!-- /.carousel-caption --> | ||
</div><!-- /Slide4 --> | </div><!-- /Slide4 --> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div><!-- /.carousel-inner --> | </div><!-- /.carousel-inner --> | ||
<!-- Controls removed --></div><!-- /#MyCarousel --> | <!-- Controls removed --></div><!-- /#MyCarousel --> | ||
</div><!-- /.main-slider --></includeonly> | </div><!-- /.main-slider --></includeonly> | ||
Latest revision as of 20:11, 20 March 2022
This is the template "Carousel". This template will display Bootstrap Carrousel with five images (incl. titles and captions). It uses custom styling to enable fading instead of sliding images.
{{Carousel
|Image1=
|Title1=
|Caption1=
|Link1=
|Image2=
|Title2=
|Caption2=
|Link2=
|Image3=
|Title3=
|Caption3=
|Link3=
|Image4=
|Title4=
|Caption4=
|Link4=
}}
Edit this page to inspect the template text.