Nivo Pause

by jupago

HTML

<script src="http://polshek.org/test/comingsoon/js/jquery.nivo.slider.js"></script>
<div class="slider-wrapper">
	<div id="slider" class="nivoSlider">
<img src="http://goo.gl/I4c65" />
<img src="http://goo.gl/acxBF"/>
<img src="http://goo.gl/GBzYF"/>
<img src="http://goo.gl/BC2EA" />
<img src="http://goo.gl/9Sd69" />
<img src="http://goo.gl/qOaZl"/>
<img src="http://goo.gl/btswq" />
</div>

</div>

CSS

.slider-wrapper { width:760px; height: 500px; }	
.clear {clear:both;}

/* The Nivo Slider styles */
.nivoSlider { position:relative; width:100%; height:auto; overflow: hidden;}
.nivoSlider img { position:absolute; top:0px; left:0px;	max-width: none;}
.nivo-main-image {	display: block !important;	position: relative !important; 	width: 100% !important;}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute; top:0px;	left:0px; width:100%; height:100%; border:0; padding:0;	margin:0;
	z-index:6; display:none; background:white;  filter:alpha(opacity=0);  opacity:0;}
	
/* The slices and boxes in the Slider */
.nivo-slice { display:block; position:absolute; z-index:5; height:100%; top:0;}
.nivo-box { display:block; position:absolute; z-index:5; overflow:hidden;}
.nivo-box img { display:block; }

/* Caption styles */
 .nivo-caption {  margin:0px 20px 0 0; display:block !important; position:fixed; top: 27px; right:80px; height:30px; text-align:right;   width:540px; font-size:15px; color: #000;}
.nivo-caption a { display:inline !important;}
.nivo-html-caption { display:none;}

/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav {  width: 20px; height: 20px; margin:0px 20px 0 0; display: block !important; position: fixed !important; right: 40px !important; top: 23px! important; }
.nivo-directionNav a, .nivo-directionNav a:hover {  text-decoration:none; cursor:pointer; }
.nivo-prevNav { margin-right:5px; background:url('images/back.png'); background-repeat:no-repeat;}
.nivo-nextNav { background:url('images/forward.png'); background-repeat:no-repeat;}

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav { text-align:center; padding: 15px 0;}
.nivo-controlNav a { cursor:pointer;}
.nivo-controlNav a.active { font-weight:bold;}

JavaScript

$('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed: 500, // Slide transition speed
		pauseTime: 5000,
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true,	 // Next & Prev navigation
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: false, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'previos', // Prev directionNav text
        nextText: 'next', // Next directionNav text
        randomStart: false, // Start on a random slide
		beforeChange: function(){},
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){			
			  $('#slider').data('nivoslider').stop();
  setTimeout("$('#slider').data('nivoslider').start()",10000);
			}, // Triggers when last slide is shown
     });
	 
  $('#slider').data('nivoslider').stop();
  setTimeout("$('#slider').data('nivoslider').start()",10000);