Articles slideshow

: mod_articles_category

Live demo

Articles slideshow


Arya Stark House Tarly of Horn Hill A dance of dragons. As High as Honor. Bastards are born of passion, aren't they? We don't despise them in Dorne. The battle of the redgrass field.
Cersei Lannister Forgive my manners. I don't see many ladies these days. Lucky for the ladies. Fire and blood. The rains of castamere. All men must die. Dunc the Lunk, thick as a castle wall.
Daenerys Targaryen A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. It is rare to meet a Lannister who shares my enthusiasm for dead Lannisters. The night is dark and full of terrors. 
Jon Snow A feast for crows. The bear and the maiden fair. A feast for crows. May the Father judge him justly. What is dead may never die.
Margaery Tyrell May the Father judge him justly. The winds of Winter. The battle of the redgrass field. The bear and the maiden fair. Winter is coming.
Tyrion Lannister A feast for crows. A Lannister always pays his debts. You know nothing, Jon Snow. A dream of Spring. House Tarly of Horn Hill
Tormund What is dead may never die. A dance of dragons. The night is dark and full of terrors. Fire and blood. A Lannister always pays his debts.
Ygrid A dance of dragons. All men must die. Pay the iron price. A forked purple lightning bolt, on black field speckled with four-pointed stars. Bastards are born of passion, aren't they?

Links are disabled in the demo

Markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @Author		web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
?>

<div class="css-slideshow">
	<?php foreach ($list as $item) : ?>
	<figure>
		<?php
			$article_images  = json_decode($item->images);
			$article_image   = '';
			$article_image_alt   = '';
			if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
				$article_image  = $article_images->image_intro;
				$article_image_alt  = $article_images->image_intro_alt;
			}?> 
			<img class="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
			
			<figcaption>
				<?php if ($params->get('link_titles') == 1) : ?>
				<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><strong><?php echo $item->title; ?></strong></a>
				<?php else : ?>
				<strong><?php echo $item->title; ?></strong>
				<?php endif; ?>
				
				<?php echo $item->displayIntrotext; ?>
			</figcaption> 
			
	</figure>
	<?php endforeach; ?>
</div>  

CSS

.css-slideshow img{
  box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption{
  position: absolute;
  top: 0;
  color: #fff;
  background: rgba(0,0,0, .3);
  font-size: .8em;
  padding: 8px 12px;
  opacity: 0;
  transition: opacity .5s;
}
.css-slideshow:hover figure figcaption{
  transition: opacity .5s;
  opacity: 1;
}
.css-slideshow-attr{
  max-width: 495px;
  text-align: right;
  font-size: .7em;
  font-style: italic;
  margin:0 auto;
}
.css-slideshow-attr a{
  color: #666;
}
.css-slideshow figure{
  opacity:0;
}
figure:nth-child(1) {
  animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
  animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
  animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
  animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
  animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
  animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
  animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
  animation: xfade 48s 0s infinite;
}

@keyframes xfade{
  0%{
    opacity: 1;
  }
  10.5% {
    opacity: 1;
  }
  12.5%{
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
A PROPOS DE L'AUTEUR :
Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.