Joomla Bites
Image slideshows can sometime be a little tricky to set up. If you're only after a simple four image slider then installing a javascript library such as jQuery could be little unnecessary. Here's how you can set up a simple animated mini slideshow using CSS trickery alone.
The HTML
Add your four images in reverse order, then wrap them in a div with the class "fling-minislide"
<div class="fling-minislide">
<img src="/path-to-your-image-file-4.jpg" alt="Slide 4" />
<img src="/path-to-your-image-file-3.jpg" alt="Slide 3" />
<img src="/path-to-your-image-file-2.jpg" alt="Slide 2" />
<img src="/path-to-your-image-file-1.jpg" alt="Slide 1" />
</div>
The CSS
Then enter the following CSS...
.fling-minislide {width:350px; height:300px; overflow:hidden; position:relative; }
.fling-minislide img{ position:absolute; animation:fling-minislide 20s infinite; opacity:0; width: 100%; height: auto;}
@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}}
.fling-minislide img:nth-child(4){animation-delay:0s;}
.fling-minislide img:nth-child(3){animation-delay:5s;}
.fling-minislide img:nth-child(2){animation-delay:10s;}
.fling-minislide img:nth-child(1){animation-delay:15s;}
The animation is set to 20 seconds and as there are four images the animation delay is set at 5 seconds difference (eg 0s, 5s, 10s, 15s).
The width and height of the container (and the images within) are fixed and the "overflow:hidden" statement ensures there's no image creep.
How do you make this Responsive?
To make the slideshow responsive requires a little tinkering and depends on the dimensions of your image.
Change the first CSS line to...
.fling-minislide {width:100%; height:0px; padding-bottom: 50%; overflow:hidden; position:relative; }
The value highlighted in red will need tweaking depending on the size of your images. This effects the height, if it is too small the image will be clipped!
The End Result
And here's our finished slideshow...
This CSS effect is included in the fling.css library and can be easily added to Joomla with the HD-FX plugin.