Difference between revisions of "Widget:ImageCarousel"

From Hackerspace ACKspace
Jump to: navigation, search
m (scripted version of carousel image list)
m (reversed array, fixed minor bug)
Line 76: Line 76:
 
var count = images.length;
 
var count = images.length;
  
images.forEach( function( _img, _n )
+
// Reverse array since we're injecting the items in the front
 +
images.reverse().forEach( function( _img, _n )
 
{
 
{
 
   var slide = document.createElement("div");
 
   var slide = document.createElement("div");
 
   slide.className = "mySlides fade";
 
   slide.className = "mySlides fade";
   slide.innerHTML = '<div class="numbertext">'+(_n+1)+' / '+count+'</div><img src="'+_img[0]+'" style="width:100%"><div class="text">+_img[1]+</div>';
+
   slide.innerHTML = '<div class="numbertext">'+(count-_n)+' / '+count+'</div><img src="'+_img[0]+'" style="width:100%"><div class="text">'+_img[1]+'</div>';
 
   container.insertBefore( slide,container.childNodes[0]);
 
   container.insertBefore( slide,container.childNodes[0]);
  

Revision as of 11:53, 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.