Diaporama avec Circle Nav JQuery et CSS

<script type="text/javascript" src="img/CircleNavImg/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="img/CircleNavImg/js/jquery.slideshow.js"></script>
<script type="text/javascript">
    $(function()
    {
        $('#cn-slideshow').slideshow();
    });
</script>
<script id="barTmpl" type="text/x-jquery-tmpl">
    <div class="cn-bar">
        <div class="cn-nav">
            <a href="#" class="cn-nav-prev">
                <span>Précédente</span>
                <div style="background-image:url(${prevSource});"></div>
            </a>
            <a href="#" class="cn-nav-next">
                <span>Suivante</span>
                <div style="background-image:url(${nextSource});"></div>
            </a>
        </div><!-- cn-nav -->
        <div class="cn-nav-content">
            <div class="cn-nav-content-prev">
                <span>Image précédente</span>
                <h3>${prevTitle}</h3>
            </div><!-- cn-nav-content-prev -->
            <div class="cn-nav-content-current">
                <span>Vue courante</span>
                <h2>${currentTitle}</h2>
            </div><!-- cn-nav-content-current -->
            <div class="cn-nav-content-next">
                <span>Image suivante</span>
                <h3>${nextTitle}</h3>
            </div><!-- cn-nav-content-next -->
        </div><!-- cn-nav-content -->
    </div><!-- cn-bar -->
</script>

<style type="text/css">
.cn-slideshow {
    width: 640px; /*largeur*/
    height: 426px; /*hauteur*/
    position: relative;
    margin: 0 auto; /*marges extérieures*/
    background: #fff; /*couleur fond*/
    border-top: 5px solid #385c5b; /*bordure haute*/
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2); /*ombre portée*/
}
.cn-loading { /*mise en place de l'image loader : peut être laissée en l'état*/
    position: absolute;
    z-index:999;
    text-indent: -9000px;
    opacity:0.6;
    top:50%;
    left:50%;
    margin:-25px 0 0 -25px;
    width:50px;
    height:50px;
    background:#000 url(img/CircleNavImg/ajax-loader.gif) no-repeat center center;
    border-radius: 25px;
}
.cn-images { /*mise en place des images : ne pas modifier*/
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.cn-images img { /*mise en place des images : ne pas modifier*/
    position: absolute;
    top: 0px;
    left: 0px;
    display: none;
}
.cn-bar { /*attributs de la barre de navigation*/
    background: transparent url(img/CircleNavImg/bar.png) repeat top left; /*fond*/
    height: 70px; /*hauteur*/
    position: absolute;
    bottom: 0px; /*positions*/
    right: 0px;
    left: 0px;
    color: #f8f8f8; /*couleur de texte*/
    z-index: 999; /*index superposition : important*/
}
.cn-nav-content { /*contenu central de la barre*/
    position: absolute;
    top: 0px; /*position*/
    height: 100%; /*hauteur*/
    right: 70px; /*position à droite*/
    left: 70px; /*position à gauche*/
    overflow: hidden;
    text-shadow:1px 1px 1px rgba(0,0,0,0.3); /*ombre portée du texte*/
}
.cn-nav-content div { /*contenus latéraux*/
    float: left;
    width: 130px; /*largeur*/
    color:#e1e1e1; /*couleur*/
}
.cn-nav-content span { /*contenus span latéraux*/
    color:#282828; /*couleur*/
    text-shadow:1px 1px 1px rgba(255,255,255,0.5); /*ombre portée du texte*/
}
.cn-nav-content div.cn-nav-content-current { /*contenu zone centrale*/
    text-align: center;
    width: 280px; /*largeur*/
    position:absolute;
    top:0px; /*positions*/
    left:50%;
    margin-left:-140px; /*marge extérieure gauche = 1/2 width*/
}
.cn-nav-content h2,
.cn-nav-content h3 { /*attributs titres*/
    padding: 0; /*marges intérieures*/
    margin: 0; /*marges extérieures*/
    line-height:24px; /*hauteur ligne*/
    font-family:Georgia, serif; /*famille police*/
    font-style:italic; /*style police*/
}
.cn-nav-content h2 {
    font-size: 18px; /*taille police*/
    color: #fff; /*couleur*/
}
.cn-nav-content h3 {
    font-size: 12px; /*taille police*/
    color: #D0AB47; /*couleur*/
}
.cn-nav-content-current span { /*contenus span courant zone centrale*/
    color:#D0AB47; /*couleur*/
    text-shadow:1px 1px 1px rgba(0,0,0,0.3); /*ombre portée du texte*/
}
.cn-nav-content div.cn-nav-content-prev { /*zone contenu latéral gauche*/
    margin-left: 20px; /*marge extérieure gauche*/
}
.cn-nav-content div.cn-nav-content-next { /*zone contenu latéral droit*/
    text-align: right; /*alignement*/
    margin-right: 20px; /*marge extérieure droite*/
    float:right;
}
.cn-nav-content div span { /*contenus div span de la barre*/
    display: block;
    padding-top: 10px; /*marge intérieure haute*/
    font-family:Verdana, sans serif; /*famille police*/
    text-transform: uppercase; /*tout en majuscule*/
    font-weight: bold; /*gras de la police*/
    letter-spacing: 2px; /*écartement des lettres*/
}
.cn-nav > a { /*liens de navigation*/
    position: absolute;
    top: 0px; /*position*/
    height: 70px; /*hauteur*/
    width: 70px; /*largeur*/
}
a.cn-nav-prev { /*lien de navigation gauche*/
    left: 0px; /*position gauche*/
}
a.cn-nav-next { /*lien de navigation droit*/
    right: 0px; /*position droite*/
}
.cn-nav a span { /*liens de navigation span : placement des flèches*/
    width: 46px; /*largeur*/
    height: 46px; /*hauteur*/
    display: block;
    text-indent: -9000px;
    border-radius: 23px; /*arrondis : 1/2 width et height*/
    cursor: pointer;
    opacity: 0.9; /*opacité*/
    position: absolute;
    top: 50%; /*positions*/
    left: 50%;
    margin: -23px 0 0 -23px; /*marges extérieures H D B G*/
    transition: all 0.4s ease; /*transition : tout : temps et nature*/
}
.cn-nav a.cn-nav-prev span { /*liens de navigation span : couleur et flèche gauche*/
    background: #385c5b url(img/CircleNavImg/prev.png) no-repeat center center;
}
.cn-nav a.cn-nav-next span { /*liens de navigation span : couleur et flèche droite*/
    background: #385c5b url(img/CircleNavImg/next.png) no-repeat center center;
}
.cn-nav a div { /*liens de navigation div : Ne pas modifier sauf éventuellement dernière ligne*/
    width: 0px;
    height: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px;
    border-radius: 0px;
    transition: all 0.2s ease-out; /*transition : tout, temps et nature*/
}
.cn-nav a:hover span { /*liens de navigation span au survol : couronne autour de la vignette*/
    width: 100px; /*largeur*/
    height: 100px; /*hauteur*/
    border-radius: 50px; /*arrondis : 1/2 width et height*/
    opacity: 0.8; /*opacité*/
    margin: -50px 0 0 -50px; /*marges extérieures H D B G*/
    background-color:#D0AB47; /*couleur*/
}
.cn-nav a:hover div { /*liens de navigation div au survol : vignette*/
    width: 90px; /*largeur*/
    height: 90px; /*hauteur*/
    background-size: 120% 120%; /*zoom éventuel de la vignette : à ajuster ou supprimer*/
    margin: -45px 0 0 -45px; /*marges extérieures H D B G*/
    border-radius: 45px; /*arrondis : 1/2 width et height*/
}
</style>