Widget:Slides

<style> .slideshow {

   position: relative;
   background-color: orange;
   overflow: hidden;

}

.slideshow .ss_nav {

   position: absolute;
   width: 100%;
   height: 100%;

}

.slideshow .ss_nav span {

   position: absolute;
   width: 50px;
   height: 50px;
   line-height: 50px;
   font-size: 50px;
   text-align: center;
   top: 50%;
   margin-top: -25px;
   z-index: 2;

}

.slideshow .ss_nav .ss_prev {

   left: 0;

}

.slideshow .ss_nav .ss_next {

   right: 0;

}

.slideshow .ss_contents {

   width: 100%;
   height: 100%;

}

.slideshow .ss_contents .ss_content {

   position: relative;
   float: left;
   width: 100%;

} </style> <script> $(function(){

   $('.ss_prev').click(function(){
       var loop = $(this).parent().parent().hasClass('loop'),
           current = $(this).parent().siblings('.ss_content:first').children('li').not(':hidden'),
           width = current.width();
       if(!current.is(':first-child')){
           current.hide().prev('li').fadeIn(500);
       }
       else if(loop){
           current.hide().siblings(':last-child').fadeIn(500);
       }
   });
   $('.ss_next').click(function(){
       var loop = $(this).parent().parent().hasClass('loop'),
           current = $(this).parent().siblings('.ss_content:first').children('li').not(':hidden'),
           width = current.width();
       if(!current.is(':last-child')){
           current.hide().next('li').fadeIn(500);
       }
       else if(loop){
           current.hide().siblings(':first-child').fadeIn(500);
       }
   });
   $('.ss_content li:first-child').siblings().hide();

}); </script>