title: MediaWiki Javascript Carousel
body: <p>I was wondering if it would be possible, to create a carousel in MediaWiki using jqueries. I'm currently working on <a href="http://en.wikivoyage.org/wiki/Main_Page_New" rel="nofollow" title="this">this</a> new Main Page for Wikivoyage and I'd quite like the bottom 3 banners (not the world image) to rotate on a carousel that span to the next slide at an allotted time (let's say 5 seconds), but also had buttons. I'd like both the images and the text upon them to spin together if possible and some sort fade effect between slides would be nice as well! I've had to do lots of CSS meddling already in order to make the images scale, but this means that that html (see below) isn't  as flexible as I might like. I've already tried using CSS animations, but have not had much success and they are not as compatible as I might like. If I'm completely honest I know very little of CSS and practically nothing about JavaScript; if anybody's prepared to actually have a go, I'd be very very gratefully, but advice too would be very welcome. Thanks!</p>
  
  <p>Wiki markup/HTML for the banners in question:</p>
  
  <pre><code>&lt;div id="DOTMtext"&gt;&lt;div style="position: absolute; z-index: 2; left: 7em; margin-top: -9em; text-align:left;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 200%;"&gt;'''[[Bali|&lt;span style="color:white;"&gt;Bali&lt;/span&gt;]]'''&lt;/div&gt;
  &lt;div id="DOTMtext"&gt;&lt;div style="position: absolute; z-index: 2; left: 7em; margin-top: -6em; text-align:left;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 150%;"&gt;'''[[Previous Destinations of the month|&lt;span style="color:white;"&gt;Destination of the month&lt;/span&gt;]]'''&lt;/div&gt;
  &lt;div id="DOTMtext"&gt;&lt;div style="position: absolute; z-index: 2; left: 7em; margin-top: -3em; text-align:left;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 130%;"&gt;'''[[Bali|&lt;span style="color:white;"&gt;"Stakes a serious claim to be paradise on earth"&lt;/span&gt;]]'''&lt;/div&gt;
  | width="60em" |
  &lt;div id="DOTM"&gt;[[File:BaliBanner5.0.jpg|frameless|1700px|link=Bali|Bali]]&lt;/div&gt;
  |-
  |&lt;hr style="height:1pt; visibility:hidden;" /&gt;
  |-
  | style="text-align:right;" |
  &lt;div id="OTBPtext"&gt;&lt;div style="position: absolute; z-index: 2; right: 7em; margin-top: -9em; text-align:right;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 200%;"&gt;'''[[Niamey|&lt;span style="color:white;"&gt;Niamey&lt;/span&gt;]]'''&lt;/div&gt;
  &lt;div id="OTBPtext"&gt;&lt;div style="position: absolute; z-index: 2; right: 7em; margin-top: -6em; text-align:right;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 150%;"&gt;'''[[Previously Off the beaten path|&lt;span style="color:white;"&gt;Off the beaten path&lt;/span&gt;]]'''&lt;/div&gt;
  &lt;div id="OTBPtext"&gt;&lt;div style="position: absolute; z-index: 2; right: 7em; margin-top: -3em; text-align:right;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 130%;"&gt;'''[[Niamey|&lt;span style="color:white;"&gt;A lively Sahelian city on &lt;br&gt; the banks of the Niger River&lt;/span&gt;]]'''&lt;/div&gt;
  | width="60em" |
  &lt;div id="OTBP"&gt;[[File:Niameybanner1.jpg|frameless|max-width: 100%|1700px|link=Niamey|Niamey]]&lt;/div&gt;
  |-
  |&lt;hr style="height:1pt; visibility:hidden;" /&gt;
  |-
  | style="text-align:left;" |
  &lt;div id="FTTtext"&gt;&lt;div style="position: absolute; z-index: 2; left: 7em; margin-top: -9em; text-align:left;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 200%;"&gt;'''[[Diving the Cape Peninsula and False Bay|&lt;span style="color:white;"&gt;Diving the Cape Peninsula and False Bay&lt;/span&gt;]]'''&lt;/div&gt;
  &lt;div id="FTTtext"&gt;&lt;div style="position: absolute; z-index: 2; left: 7em; margin-top: -6em; text-align:left;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 150%;"&gt;'''[[Previous Featured travel topics|&lt;span style="color:white;"&gt;Featured travel topic&lt;/span&gt;]]'''&lt;/div&gt;
  &lt;div id="FTTtext"&gt;&lt;div style="position: absolute; z-index: 2; left: 7em; margin-top: -3em; text-align:left;"&gt;&lt;span style="color: white;"&gt;&lt;span style="font-size: 130%;"&gt;'''[[Diving the Cape Peninsula and False Bay|&lt;span style="color:white;"&gt;"The waters support a thriving ecology of cool temperate &lt;br /&gt; marine organisms and they include some of the most awesome &lt;br /&gt; and spectacular encounters possible for a diver"&lt;/span&gt;]]'''&lt;/div&gt;
  | width="60em" |
  &lt;div id="FTT"&gt;[[File:Reef scene at Rocky Bank with fish P9205353.jpg|frameless|1700px|link=Diving the Cape Peninsula and False Bay|Diving the Cape Peninsula and False Bay]]&lt;/div&gt;
  |}
  </code></pre>