Snippets/Image Slideshow created by CSS

How to use Snippets
List of Snippets

Image Slideshow created by CSS
Language(s):	CSS
Compatible with:	MediaWiki 1.22+ (all)

Description

This CSS allows the creation of slideshows of images using just CSS. It's an inferior method to making a slideshow than Extension:JavascriptSlideshow, but it never hurts to have more ways to do something. It is expected to have five photos, and only five will be in the slideshow. Of course, you can play with the code and change that (and since it's CSS it's very easy to play with the code)

SPECIAL TECHNICAL ISSUE

This snippet only works with the HTML image tag, which is usually not allowed in MediaWiki. However, you can change that very quickly by following the steps in Manual:$wgAllowImageTag (deprecated in 1.35). The full path to the image must be written out. Use the filepath command {{filepath:{{{Name of Photo}}} }} to set that, which makes it easy to use in a template.

Older browsers, like i.e., 8 and down, may not play the slideshow correctly.

Usage

Gallery, or Image, must be between the following division tags: <div class="containerphoto"> </div>, and the image must reference the class (see example). Just list your five images on the Page (like the example), and the Images will appear in the Slideshow.

Example

 <div class="containerphoto">
  <img class='photoslide'  src="{{filepath:Astronotus_ocellatus.jpg}}"/>
  <img class='photoslide'  src="{{filepath:Salmonlarvakils.jpg}}"/>
  <img class='photoslide'  src="{{filepath:Georgia Aquarium - Giant Grouper.jpg}}"/>
  <img class='photoslide'  src="{{filepath:Pterois volitans Manado-e.jpg}}"/>
 <img class='photoslide'  src="{{filepath:MC Rotfeuerfisch.jpg}}"/>

</div>

Code

Image Slideshow.css:

/* CSS Image Slideshow created by CSS
 * 
 * @author: Unknown
 * current version crafted together by [[User:Christharp]] from several CSS sites. For my website:[http://www.yellpedia.com/wiki/Main_Page Yellpedia]
 */

.containerphoto{
   height: 500px;
   width: 500px;
  overflow:hidden;
  position:relative;
}

.photoslide{
  position:absolute;
  animation:round 20s infinite;
  opacity:0;
  
}
@keyframes round{   
  25%{opacity:1;}
  40%{opacity:0;}
} 

img:nth-child(5){animation-delay:0s;}
img:nth-child(4){animation-delay:4s;}
img:nth-child(3){animation-delay:8s;}
img:nth-child(2){animation-delay:12s;}
img:nth-child(1){animation-delay:16s;}
}

Changing Image Size

Just change the height and width to change the size.

Changing the number of pics, timing, etc.

Play with the CSS. It can be done easily.