Difference between revisions of "Widget:ImageCarousel"

From Hackerspace ACKspace
Jump to: navigation, search
m (and it is broken..)
m (first real set of pictures (optimize later))
Line 22: Line 22:
 
   <div class="mySlides fade">
 
   <div class="mySlides fade">
 
     <div class="numbertext">1 / 3</div>
 
     <div class="numbertext">1 / 3</div>
     <img src="img1.jpg" style="width:100%">
+
     <img src="/w/images/thumb/e/e0/Blinking_led.jpg/1200px-Blinking_led.jpg" style="width:100%">
 
     <div class="text">Caption Text</div>
 
     <div class="text">Caption Text</div>
 
   </div>
 
   </div>
Line 28: Line 28:
 
   <div class="mySlides fade">
 
   <div class="mySlides fade">
 
     <div class="numbertext">2 / 3</div>
 
     <div class="numbertext">2 / 3</div>
     <img src="img2.jpg" style="width:100%">
+
     <img src="/w/images/thumb/4/4f/3D_printer_Picture.jpg/1200px-3D_printer_Picture.jpg" style="width:100%">
 
     <div class="text">Caption Two</div>
 
     <div class="text">Caption Two</div>
 
   </div>
 
   </div>
Line 34: Line 34:
 
   <div class="mySlides fade">
 
   <div class="mySlides fade">
 
     <div class="numbertext">3 / 3</div>
 
     <div class="numbertext">3 / 3</div>
     <img src="img3.jpg" style="width:100%">
+
     <img src="/w/images/thumb/d/d9/L1.jpg/1200px-L1.jpg" style="width:100%">
 
     <div class="text">Caption Three</div>
 
     <div class="text">Caption Three</div>
 
   </div>
 
   </div>

Revision as of 10:43, 19 March 2019

This widget allows you to display an image carousel on your wiki page.

Created by xopr, inspired by W3schools example

Using this widget

To insert this widget, use the following code:

{{#widget:ImageCarousel
}}

Note:

  • this is a work in progress

Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:ImageCarousel article.