Mini Shell

<style type="text/css">
<?php echo $idcss ?>{width: 100%; float: left; background: #300a3b; background: #f1f1f1;}
<?php echo $idcss ?> h1{text-align: center; margin-bottom: 40px;}
<?php echo $idcss ?> .carousel{background: #fff; border-radius: 5px}
<?php echo $idcss ?> .carousel a{border-right: solid 1px #ccc; padding:30px; cursor: pointer; overflow: hidden;}
<?php echo $idcss ?> .carousel a:hover img{transform: scale(1.1);}
<?php echo $idcss ?> .lSSlideOuter .lSPager.lSpg > li a{background: #696969; width: 10px; height: 10px;border-radius: 100px; }
<?php echo $idcss ?> .lSPager{margin-top: 40px !important;}
<?php echo $idcss ?> .lSSlideOuter .lSPager.lSpg > li.active a{background: <?php echo $cor1 ?> !important}
<?php echo $idcss ?> #carousel .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a{background: #fff !important; width: 26px !important;}
</style>

<section id="<?php echo $idCss ?>">
    <h1><?php echo $row_templates['templates_home_titulo'] ?></h1>
    <div class="container">
        <?php
        $query = "SELECT * FROM registros WHERE registros_idpg = $template_idpg";
        $carousel = mysqli_query($config, $query) or die(mysqli_error());
        ?>
        <ul class="carousel">
            <?php while($row_carousel = mysqli_fetch_assoc($carousel)){ ?>
            <a href="<?php echo $row_carousel['registros_link'] ?>" target="_blank"><center><img src="<?php echo RAIZ ?>timthumb.php?src=<?php echo RAIZ_UP.$row_carousel['registros_imagem'] ?>&zc=3&w=285&h=100" class="img-responsive transition"></center></a>
            <?php } ?>
        </ul>
    </div>
</section>


<script type="text/javascript">
$(document).ready(function(){
    $('.carousel').lightSlider({
        item:5,
        thumbItem:0,
        slideMargin: 0,
        speed:500,
        pause:2000,
        pauseOnHover:true,
        controls:false,
        pager:true,
        auto:true,
        loop:true,
        responsive : [
            {
                breakpoint:800,
                settings: {
                    item:3,
                    slideMove:1,
                    slideMargin:6,
                  }
            },
            {
                breakpoint:480,
                settings: {
                    item:2,
                    slideMove:1
                  }
            }
        ]
    });
});
</script>