|
|
| (6 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| <div class="alert alert-warning">This page exists just for testing purposes. Carousels are not currently supported by Tweeki out of the box. Patches with CSS fixes and the necessary code to allow the <code>data-slider</code> attribute in <code>btn</code> elements are warmly welcome.</div>
| | [[Category:Components]] |
|
| |
|
| This said, there is couple of workarounds, that you could use if you're really eager to get a carousel on you wiki:
| | == Simple Example == |
| # Use the standard Bootstrap-slider carousel ''without the controls''
| |
| # Use the [https://www.mediawiki.org/wiki/Extension:Widgets extension Widgets] if you need a full functioning carousel
| |
| | |
| Additionally, you can also adapt the standard Bootstrap ''slider'' to a ''fading'' carousel. This will make your carousel less "flashy". You will have to skip the ''controls'' part of the carousel as well, though.
| |
| | |
| == Standard carousel without controls == | |
| | |
| This is the more-or-less standard bootstrap carousel code, with the ''controls'' part removed. Then, only the images are adapted to wiki text:
| |
|
| |
|
| <pre> | | <pre> |
| <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | | <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> |
| <!-- Indicators -->
| | <div class="carousel-inner"> |
| <ol class="carousel-indicators">
| | <div class="carousel-item active"> |
| <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
| | [[File:Screenshot_tweeki.png|link=Mainpage|class=d-block w-100]] |
| <li data-target="#carousel-example-generic" data-slide-to="1"></li>
| |
| <li data-target="#carousel-example-generic" data-slide-to="2"></li>
| |
| </ol>
| |
| | |
| <!-- Wrapper for slides -->
| |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active">
| |
| [[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]]
| |
| <div class="carousel-caption">
| |
| <h3 style="color: red">Caption 1</h3>
| |
| </div>
| |
| </div>
| |
| <div class="item">
| |
| [[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
| |
| <div class="carousel-caption">
| |
| <h3 style="color: red">Caption 2</h3>
| |
| </div>
| |
| </div>
| |
| <div class="item">
| |
| [[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
| |
| <div class="carousel-caption">
| |
| <h3 style="color: red">Caption 3</h3>
| |
| </div>
| |
| </div>
| |
| </div>
| |
| | |
| <!-- Controls removed -->
| |
| </div>
| |
| </pre>
| |
| | |
| '''NB: Make sure to remove all the indents (spaces), or they will mess up the layout!'''
| |
| | |
| === Example Standard Carousel - no controls ===
| |
| | |
| This is what the result of the code above will look like:
| |
| | |
| <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
| |
| <!-- Indicators -->
| |
| <ol class="carousel-indicators">
| |
| <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
| |
| <li data-target="#carousel-example-generic" data-slide-to="1"></li>
| |
| <li data-target="#carousel-example-generic" data-slide-to="2"></li>
| |
| </ol>
| |
| | |
| <!-- Wrapper for slides -->
| |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active">
| |
| [[File:Screenshot_tweeki.png|link=Mainpage|class=img-responsive]] | |
| <div class="carousel-caption">
| |
| <h3 style="color: red">Caption 1</h3>
| |
| </div>
| |
| </div>
| |
| <div class="item">
| |
| [[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]]
| |
| <div class="carousel-caption">
| |
| <h3 style="color: red">Caption 2</h3>
| |
| </div>
| |
| </div> | | </div> |
| <div class="item"> | | <div class="carousel-item"> |
| [[File:Screenshot_skrifo.png|link=Mainpage|class=img-responsive]] | | [[File:Screenshot_skrifo.png|link=Mainpage|class=d-block w-100]] |
| <div class="carousel-caption">
| |
| <h3 style="color: red">Caption 3</h3>
| |
| </div> | | </div> |
| </div> | | </div> |
| </div> | | </div> |
|
| |
| <!-- Controls removed -->
| |
| </div>
| |
|
| |
| == Bootstrap carousel using the Widget extension ==
| |
|
| |
| TBD
| |
|
| |
| == Using custom styling and template for Bootstrap carousel ==
| |
|
| |
| WORK IN PROGRESS
| |
|
| |
|
| |
| <pre>
| |
| <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 ''fading'' instead of ''sliding'' images.
| |
| <pre>
| |
| {{Carousel
| |
| |Image1=
| |
| |Title1=
| |
| |Caption1=
| |
| |Image2=
| |
| |Title2=
| |
| |Caption2=
| |
| |Image3=
| |
| |Title3=
| |
| |Caption3=
| |
| |Image4=
| |
| |Title4=
| |
| |Caption4=
| |
| |Image5=
| |
| |Title5=
| |
| |Caption5=
| |
| }}
| |
| </pre>
| |
| <span class="plainlinks">[{{fullurl:{{FULLPAGENAME}}|action=edit}} Edit this page]</span> to inspect the template text.
| |
| </noinclude><includeonly><div class="row main-slider">
| |
| <div id="CarrouselTE1" class="carousel slide carousel-fade" data-ride="carousel">
| |
| <!-- Indicators -->
| |
| <ol class="carousel-indicators">
| |
| <li data-target="#MyCarousel" data-slide-to="0" class="active"></li>
| |
| <li data-target="#MyCarousel" data-slide-to="1"></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="4"></li>
| |
| </ol>
| |
| <!-- Carousel items -->
| |
| <div class="carousel-inner" role="listbox">
| |
| <!-- Slide 1 : Active -->
| |
| <div class="item active">
| |
| [[File:{{{Image1|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
| |
| <div class="carousel-caption">
| |
| <h3>{{{Title1|}}}</h3>
| |
| <p>{{{Caption1}}}</p>
| |
| </div><!-- /.carousel-caption -->
| |
| </div><!-- /Slide1 -->
| |
| <!-- Slide 2 -->
| |
| <div class="item ">
| |
| [[File:{{{Image2|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
| |
| <div class="carousel-caption">
| |
| <h3>{{{Title|}}}</h3>
| |
| <p>{{{Caption2}}}</p>
| |
| </div><!-- /.carousel-caption -->
| |
| </div><!-- /Slide2 -->
| |
| <!-- Slide 3 -->
| |
| <div class="item ">
| |
| [[File:{{{Image3|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
| |
| <div class="carousel-caption">
| |
| <h3>{{{Title3|}}}</h3>
| |
| <p>{{{Caption3}}}</p>
| |
| </div><!-- /.carousel-caption -->
| |
| </div><!-- /Slide3 -->
| |
| <!-- Slide 4 -->
| |
| <div class="item ">
| |
| [[File:{{{Image4|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
| |
| <div class="carousel-caption">
| |
| <h3>{{{Title4|}}}</h3>
| |
| <p>{{{Caption4}}}</p>
| |
| </div><!-- /.carousel-caption -->
| |
| </div><!-- /Slide4 -->
| |
| <!-- Slide 5-->
| |
| <div class="item ">
| |
| [[File:{{{Image5|}}}{{!}}class=img-responsive{{!}}link=Hoofdpagina]]
| |
| <div class="carousel-caption">
| |
| <h3>{{{Title5|}}}</h3>
| |
| <p>{{{Caption5}}}</p>
| |
| </div><!-- /.carousel-caption -->
| |
| </div><!-- /Slide5 -->
| |
| </div><!-- /.carousel-inner -->
| |
| <!-- Controls removed -->
| |
| </div><!-- /#MyCarousel -->
| |
| </div><!-- /.main-slider --></includeonly>
| |
|
| |
| </pre> | | </pre> |
|
| |
|
| <!--
| | <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> |
| == This example is not working ... ==
| | <div class="carousel-inner"> |
| <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | | <div class="carousel-item active"> |
| <ol class="carousel-indicators"> | | [[File:Screenshot_tweeki.png|link=Mainpage|class=d-block w-100]] |
| <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
| |
| <li data-target="#carousel-example-generic" data-slide-to="1"></li>
| |
| <li data-target="#carousel-example-generic" data-slide-to="2"></li>
| |
| </ol>
| |
| | |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active">
| |
| [[File:Screenshot_tweeki.png|link=|600px]] | |
| <div class="carousel-caption">
| |
| Caption 1
| |
| </div> | | </div> |
| | <div class="carousel-item"> |
| | [[File:Screenshot_skrifo.png|link=Mainpage|class=d-block w-100]] |
| </div> | | </div> |
| <div class="item">
| |
| [[File:Screenshot_skrifo.png|link=|600px]]
| |
| <div class="carousel-caption">
| |
| Caption 2
| |
| </div> | | </div> |
| </div> | | </div> |
| Bottom
| |
| </div>
| |
|
| |
| <btn class="left carousel-control" role="button" data-slide="prev">#carousel-example-generic|<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
| |
| <span class="sr-only">Previous</span>
| |
| </btn>
| |
| <btn class="right carousel-control" role="button" data-slide="next">#carousel-example-generic|<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
| |
| <span class="sr-only">Next</span>
| |
| </btn>
| |
| </div>
| |
| -->
| |
Simple Example
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=d-block w-100]]
</div>
<div class="carousel-item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=d-block w-100]]
</div>
</div>
</div>
