|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| − | __TOC__
| |
| | [[Category:Components]] | | [[Category:Components]] |
| − | <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>
| |
| | | | |
| − | 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.
| |
| − | | |
| − | == Test == | |
| | | | |
| | + | <pre> |
| | <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> | | <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> |
| | <div class="carousel-inner"> | | <div class="carousel-inner"> |
| Line 20: |
Line 13: |
| | </div> | | </div> |
| | </div> | | </div> |
| − | </div>
| |
| − |
| |
| − | == 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>
| |
| − | <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 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> | | </div> |
| | </pre> | | </pre> |
| | | | |
| − | '''NB: Make sure to remove all the indents (spaces), or they will mess up the layout!'''
| + | <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> |
| − | | + | <div class="carousel-inner"> |
| − | === Example Standard Carousel - no controls ===
| + | <div class="carousel-item active"> |
| − | | + | [[File:Screenshot_tweeki.png|link=Mainpage|class=d-block w-100]] |
| − | 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 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 class="carousel-item"> |
| | + | [[File:Screenshot_skrifo.png|link=Mainpage|class=d-block w-100]] |
| | </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
| |
| − |
| |
| − | ''Fading'' from one image to the next is not a standard option for a Bootstrap carousel. To implement fading you need to add custom styling to [[MediaWiki:Common.css]] or [[Mediawiki:Tweeki.css]]. You can find the CSS you need to implement ''fading'' here: https://codepen.io/redfrost/pen/QwWMwb
| |
| − |
| |
| − | Because Bootstrap carousel requires quite some html-code it makes sense to use a template. You can find an example of a working template for a carousel on [[Template:Carousel]] - feel free to copy it to your site!
| |
| − |
| |
| − | Using this template you can display a carousel with five slides in a more convenient way:
| |
| − |
| |
| − | <pre>
| |
| − | {{Carousel
| |
| − | |Image1=Screenshot_tweeki.png
| |
| − | |Title1= Screenshot 1
| |
| − | |Caption1= Website of Tweeki
| |
| − | |Image2=Screenshot_skrifo.png
| |
| − | |Title2= Screenshot 2
| |
| − | |Caption2= Website made with Tweeki
| |
| − | |Image3=Screenshot_tweeki.png
| |
| − | |Title3= Screenshot 3
| |
| − | |Caption3=Website of Tweeki
| |
| − | |Image4=Screenshot_skrifo.png
| |
| − | |Title4= Screenshot 4
| |
| − | |Caption4= Website made with Tweeki
| |
| − | |Image5=Screenshot_tweeki.png
| |
| − | |Title5= Screenshot 5
| |
| − | |Caption5=Website of Tweeki
| |
| − | }}
| |
| − | </pre>
| |
| − |
| |
| − | === Example ===
| |
| − |
| |
| − | {{Carousel
| |
| − | |Image1=Screenshot_tweeki.png
| |
| − | |Title1= Screenshot 1
| |
| − | |Caption1= Website of Tweeki
| |
| − | |Image2=Screenshot_skrifo.png
| |
| − | |Title2= Screenshot 2
| |
| − | |Caption2= Website made with Tweeki
| |
| − | |Image3=Screenshot_tweeki.png
| |
| − | |Title3= Screenshot 3
| |
| − | |Caption3=Website of Tweeki
| |
| − | |Image4=Screenshot_skrifo.png
| |
| − | |Title4= Screenshot 4
| |
| − | |Caption4= Website made with Tweeki
| |
| − | |Image5=Screenshot_tweeki.png
| |
| − | |Title5= Screenshot 5
| |
| − | |Caption5=Website of Tweeki
| |
| − | }}
| |
| − |
| |
| − | <!--
| |
| − | == This example is not working ... ==
| |
| − | <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
| |
| − | <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>
| |
| − |
| |
| − | <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="item">
| |
| − | [[File:Screenshot_skrifo.png|link=|600px]]
| |
| − | <div class="carousel-caption">
| |
| − | Caption 2
| |
| − | </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> | | </div> |
| − | -->
| |
