Mini Shell

<style type="text/css">
	#slideshow li{position: relative; background: #000}
	#slideshow li .texto{color: #fff; font-size:30px; line-height: 32px;  text-align: center; width: 100%; position: absolute; left:0; top: 40%;  transform:translate3d(0px, 40px, 0px); opacity: 0}
	#slideshow li .texto.textoActive{opacity: 1; transform:translate3d(0px, 0px, 0px);}
	#slideshow li .texto h2{color: #fff; font-size:50px; line-height: 45px; font-weight: bold;}
	#slideshow .img-fluid, #slideshow li { width: 100%; max-width: 100%; }
	@media(max-width: 1250px){
    	#slideshow li .texto h2{font-size: 40px; line-height: 40px;}
	}
	@media(max-width: 767px){
		#slideshow li .texto{top:15%; }
    	#slideshow li .texto h2{font-size: 20px; line-height: 20px;}
    	#slideshow li .texto{font-size: 16px; line-height: 16px;}
	}
</style>
<?php 
$query = "SELECT * FROM registros WHERE registros_idpg = $template_idpg ORDER BY registros_ordem ASC";
$slideshow = mysqli_query($config, $query) or die(mysqli_error());
?>
<div id="<?php echo $idCss ?>">
	<ul id="slideshow">
		<?php while($row_slideshow = mysqli_fetch_assoc($slideshow)){ ?>
	    <li>
	    	<img src="<?php echo RAIZ_UP . $row_slideshow['registros_imagem'] ?>" class="img-fluid" style="width: 100%;">
	    </li>
	    <?php } ?>
	</ul>
</div>

<script type="text/javascript">
	$(document).ready(function(){
	    $('#slideshow').lightSlider({
	        item:1,
	        thumbItem:0,
	        slideMargin: 0,
	        speed:2000,
	        pause:5000,
	        pauseOnHover:true,
	        pager: false,
	        auto:true,
	        loop:true,
	        onAfterSlide: function (el) {
	            $('.texto').removeClass('textoActive');
	            $('.active').find('.texto').addClass('textoActive');
	        }
	    });
	    $('#slideshow .active').find('.texto').addClass('textoActive');
	});
</script>