Module override to use com_content to display a slideshow.

info_NL.txt

Je zet slideshow.php in je template map: "templates/template-naam/html/mod_articles_category/" 

- Mijn opmaak is gebaseerd op Bootstrap 5. 
- Voor de slideshow gebruiken we splindle http://splidejs.com en in het voorbeeld gebruik ik jsdeliver om die aan de pagina toe te voegen. In mijn eigen implementatie heb ik de files locaal opgeslagen en geladen via de template.

Custom fields informatie
- Ik heb een custom field groep aangemaakt genaamd "slideshow"
- Daarna heb ik 6 custom fields aangemaakt. Voor alle custom fields heb ik veldgroep op "slideshow" gezet. en ik heb ook een artikel categorie genaamd "slideshow" gemaakt waar ik alle slides in heb staan. Die selecteer je ook bij "categorie". 

De custom fields 
- Achtergrondkleur (type field = "Lijst")
- - Lijstwaarden (Tekst | Waarde)
- - - White | white
- - - Primary | primary
- - - Secondary | secondary
- - - Success | success
- - - Info | info
- - - Warning | warning
- - - Danger | danger

- Knopnaam (type field = "text")

- Knoplink (type field = "URL")
- - Relatieve URLS: Ja

- Tekstkleur (type field = "Lijst")
- - Lijstwaarden (Tekst | Waarde)
- - - Default | default
- - - White | white
- - - Primary | primary
- - - Secondary | secondary
- - - Success | success
- - - Info | info
- - - Warning | warning
- - - Danger | danger

- Knopkleur (type field = "Lijst")
- - Lijstwaarden (Tekst | Waarde)
- - - Default | default
- - - White | white
- - - Primary | primary
- - - Secondary | secondary
- - - Success | success
- - - Info | info
- - - Warning | warning
- - - Danger | danger

- Uitlijning (type field = "Lijst")
- - Lijstwaarden (Tekst | Waarde)
- - - Links | start
- - - Midden | center
- - - Rechts | end

Bij alle velden zijn deze instellingen toegepast:
- Veldgroep: slideshow
- Categorie: slideshow (dit is de artikel categorie)
- Opties -> Render opties -> Automatische weergave: Niet automatisch weergeven

slideshow.php

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 *
 * @copyright   Copyright (C) 2005 - 2021 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('_JEXEC') or die;
use \Joomla\Component\Fields\Administrator\Helper\FieldsHelper;
use Joomla\CMS\Factory;

$document = Factory::getDocument();
$document->addScript('https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js');
$document->addStyleSheet('https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css');
?>

<div id="image-slider" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
		<?php foreach ($list as $item) : ?>
			<?php
			$customfields = FieldsHelper::getFields('com_content.article', $item);
			$knoplink = "";
			$achtergrondkleur = "";
			$tekstkleur = "";
			$knopkleur = "";
			$knoptekst = "";
			$uitlijning = "";
			foreach ($customfields as $field) 
			{
				switch ( $field->name )
				{
						case "knoplink";
						$knoplink = $field->rawvalue;
						break;
						case "knopnaam";
						$knoptekst = $field->rawvalue;
						break;
						case "achtergrondkleur";
						$achtergrondkleur = $field->rawvalue;
						break;
						case "tekstkleur";
						$tekstkleur = $field->rawvalue;
						break;
						case "knopkleur";
						$knopkleur = $field->rawvalue;
						break;						
						case "uitlijning";
						$uitlijning = ( $field->rawvalue ) ?  $field->rawvalue : "end" ;
						break;						
				}
			}
			$images = "";
			if (isset($item->images)) 
			{
				$images = json_decode($item->images);
			}
			$imgexists = (isset($images->image_intro) and !empty($images->image_intro)) || (isset($images->image_fulltext) and !empty($images->image_fulltext));
			if ($imgexists) 
			{			
				$images->image_intro = $images->image_intro?$images->image_intro:$images->image_fulltext;
			}
			?>
			<li class="splide__slide">
				<div class="splide__slide__container">
					<img src="<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>"
						 alt="<?php echo htmlspecialchars($images->image_intro_alt, ENT_COMPAT, 'UTF-8'); ?>"
						 itemprop="image"
						 class="w-100"
						 data-splide-lazy="<?php echo htmlspecialchars($images->image_intro, ENT_COMPAT, 'UTF-8'); ?>"
					 >
				</div>
				<div class="slideshow-text position-absolute d-flex top-0 end-0 bottom-0 start-0 justify-content-<?php echo $uitlijning; ?> text-<?php echo $uitlijning; ?> align-items-center p-5 m-5">
					<div class="d-flex bg-<?php echo $achtergrondkleur; ?> text-<?php echo $tekstkleur; ?> w-slideshowcontent p-4 flex-column text-align-<?php echo $uitlijning; ?>">
						<div class="p-0 p-lg-3">
							<p class="h3 text-<?php echo $tekstkleur; ?> mt-0 "><?php echo htmlspecialchars($item->title, ENT_COMPAT, 'UTF-8'); ?></p>
							<?php echo $item->introtext; ?>
							<a href="<?php echo $knoplink; ?>" class="btn btn-<?php echo $knopkleur; ?> rounded-pill shadow-sm "><?php echo $knoptekst; ?></a>
						</div>
					</div>
				</div>
			</li>
		<?php endforeach; ?>
		</ul>
	</div>
</div>

<script>
  document.addEventListener( 'DOMContentLoaded', function() {
    var splide = new Splide( '.splide' , {
		type: "loop",
		cover: true,
		speed: 400,
		heightRatio: 0.40,
		autoplay: true,
		lazyLoad: true
	} );
    splide.mount();
  } );
</script>