SLideshow Template for

<?php
/**
Template Page for the gallery overview
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>

    <!-- SLIDESHOW -->

<div class="slideshowWrap">
    <ul class="slideshow">

        <?php foreach ( $images as $image ) : ?>

            <li id="ngg-image-<?php echo $image->pid ?>" class="slide">

                    <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
                        <?php if ( !$image->hidden ) { ?>
                        <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->imageURL ?>" />
                        <?php } ?>
                    </a>
                    <span><?php echo $image->description ?></span>

            </li>

        <?php if ( $image->hidden ) continue; ?>

        <?php endforeach; ?>

     </ul>
</div>

<?php endif; ?>

<style>

    div.slideshowWrap {
        padding: 10px;
        width: 800px;
        overflow: hidden;
        margin: auto;
        background: #E6E6DF;
        border: 1px solid #CD4B18;
        border-radius: 8px;
    }

    ul.slideshow {
        list-style: none;
        padding: 0;
        margin: 0;
        border-radius: 8px;
    }

    ul.slideshow li {
        position: relative;
        padding: 0;
        margin: 0;
    }


    ul.slideshow li span {
        position: absolute;
        bottom: 20px;
        left: 10px;
        z-index: 100;
        padding: 10px;
        border-radius: 6px;
        background: rgba(0,0,0,.4);
        color: #E6E6DF;
        font-family: monospace;
    }

    div.slideshow_nav {
        display: table;
        margin: auto;
    }

    div.slideshow_nav a {
        display: inline-block;
        height: 24px;
        width: 24px;
        text-indent: -9999px;
        border: 3px solid #CD4B18;
        border-radius: 50%;
        margin: 5px;
        position: relative;
    }

    div.slideshow_nav a::after {
        content: '';
        position: absolute;
        top: 7px;
        left: 7px;
        height: 10px;
        width: 10px;
        background: #CD4B18;
        border-radius: 50%;
        display: none;
    }

    div.slideshow_nav a.activeSlide::after {
        display: block;
    }

    div.slideshow_nav a:hover {
        background: #fff;
    }

</style>