Carousel

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 data-slider attribute in btn elements are warmly welcome.

This said, there is couple of workarounds, that you could use if you're really eager to get a carousel on you wiki:

1. Use the standard Bootstrap-slider carousel without the controls
2. Use the 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:

<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>

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:

Caption 1

Caption 2

Caption 3

Bootstrap carousel using the Widget extension

TBD

Using custom styling and template for Bootstrap carousel

WORK IN PROGRESS

<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=
}}

Edit this page to inspect the template text.