site link http://www.calikay.com
here is my code
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* 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;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:url(../images/featured-overlay.png) repeat;
color:#fff;
width:100%;
z-index:8;
padding:10px;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
#slider { z-index:1; }
#slider .nivo-controlNav {
position:absolute;
bottom:-90px; /* Put the nav below the slider */
width:636px;
height:80px;
}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
position:relative;
width:133px;
height:80px;
margin-right:16px;
padding:4px; border:1px solid #E5E5E5;
}
#slider .nivo-controlNav a { width:143px; height:90px; display:block; float:left; margin-right:16px; }
#slider .nivo-controlNav a.active { background:#D5D5D5; }
#slider .nivo-controlNav a.active img { border:1px solid #C5C5C5; }
SLIDER CODE
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('#slider').nivoSlider({
effect:'<?php echo get_option('fp_slider_effect'); ?>', // Specify sets like: 'fold,fade,sliceDown'
pauseTime:<?php echo get_option('fp_slider_time'); ?>, // How long each slide will show
captionOpacity:false, // Universal caption opacity
directionNav:false, // Next & Prev navigation
directionNavHide:false, // Only show on hover
controlNavThumbs:true, // Use thumbnails for Control Nav
controlNavThumbsFromRel:true // Use image rel for thumbs
});
});
</script>

New Topic/Question
Reply


MultiQuote


|