Published: April 22, 2012  By: Pascal  
Londres - Bus - 1 Londres - View - 2 Londres - View - 3 Londres - View - 4

Several (nice) tips for the Nivo Slider

Today, we're going to dig some interesting tweaking on the fabulous jQuery Nivo Slider and we'll see that
these changes are often really easy to set up.

The first tweak is related to bullets, the ones which are always visible when active and we're going to add
a new feature...

Make the Bullets Appear On Hover (and only on hover)

1. Simply insert these lines in the CSS file

#NivosliderD51:hover .nivo-controlNav a {
visibility:visible;
}

Note: replace NivosliderD51 with the slider's ID of your page.

2. Add a single line in the CSS file (bullets will be hidden as default)

.nivo-controlNav a {
display:block;
visibility:hidden; /* HERE */
width:15px;
height:15px;
background:url(bullets-nivo-demo51.png) no-repeat;
text-indent:-9999px;
position:relative;
border:0px;
top:277px;
left:230px;
margin-right:6px;
float:left;
}

Display Overlay Text Under the Nivo Slider (with size auto adjust)

The modified CSS

.nivo-caption {
left:0px;
top:302px; /* Text under the Nivo Slider */
width:540px; /* Caption width */
bottom:auto; /* Auto adjust */
background:#DDD; /* Background color */
}

.nivo-caption p {
font-family: trebuchet MS;
color: #222; /* font color */
font-weight: normal;
font-size: 16px;
line-height: 16px;
margin:0 0 5px 0; /* 5px space bottom */
text-align:left;
}

Sliding Right Captions with Nivo Slider On Hover
Londres - Bus - 1 Londres - View - 2 Londres - View - 3 Londres - View - 4
1. Add these lines of code in the <head> section of the HTML page (for a 120 pixel wide caption)

<!-- Show Captions/Slide right on Hover -->
<script type="text/javascript">
$(function(){  
$('#NivosliderD52').hover(function(){
$(".nivo-caption").css("visibility","visible");
$(".nivoSlider").css("left","120px");
},function(){
$(".nivo-caption").css("visibility","hidden");
$(".nivoSlider").css("left","0px");
});
});
</script>

Note: replace NivosliderD52 with the slider's ID of your page.

2. Use the following lines in the CSS file for a 120 pixel shift

.nivo-caption {
visibility:hidden;
right:0px;
left:-120px;
width:120px;
top:0px;
bottom:0px;
text-transform:capitalize;
background:#2E66B0; /* background color */
}

.nivo-caption p {
font-family: tahoma;
color: #EEE; /* font color */
font-weight: normal;
font-size: 15px;
line-height: 18px;
margin:5px; /* edges distances */
text-align:left;
}

3. To make a smooth CSS3 transition (please check browser compatibility notably with Internet
Explorer)

.nivoSlider {
-webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
}


• Downloads

> CSS file of the 2 Nivo Sliders

> demos images (arrows and bullets)

Thanks for reading and hope this helped!
Fin article