Difference between revisions of "Carousel"

From Tweeki
Jump to: navigation, search
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>
 
<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:
 +
# 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>
 +
<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>
 +
</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 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>
 +
 +
== Bootstrap carousel using the Widget extension ==
 +
 +
TBD
 +
 +
== Using custom styling and template for Bootstrap carousel ==
 +
 +
TBD
 +
 +
 +
 +
<!--
 +
== This example is not working ... ==
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
<ol class="carousel-indicators">
 
<ol class="carousel-indicators">
Line 31: Line 127:
 
</btn>
 
</btn>
 
</div>
 
</div>
 +
-->

Revision as of 14:44, 6 June 2018

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:

Bootstrap carousel using the Widget extension

TBD

Using custom styling and template for Bootstrap carousel

TBD



Retrieved from "https://tweeki.kollabor.at/w/index.php?title=Carousel&oldid=572"