Evening all.
I am using nivoSlider, and have come across an issue with ow i'd like it to work.
Here is a sample of the slider:
http://gavdev.roundthebend.info/index2.html
This is what i would like it to do:
http://www.directenergypurchasing.com/
This is the HTML:
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script>
.nivoSlider {
position:relative;
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#B4B905;
color:#005866;
width:350px;
height: 100%;
z-index:8;
padding: 5px 10px;
padding-left: 35px;
overflow: hidden;
display: none;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
</script>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<img src="images/strategy-img.png" alt="" title="htmlcaption"/>
<img src="images/sunrise.png" alt="" title="htmlcaption2"/>
<img src="images/wind_header.png" alt="" title="htmlcaption3"/>
<img src="images/solar_header.png" alt="" title="htmlcaption4"/>
<img src="images/hydro_header.png" alt="" title="htmlcaption5"/>
</div>
</div>
This is the JScript
<script type="text/javascript">
// See http://nivo.dev7studios.com/support/jquery-plugin-usage/
$(window).load(function() {
$('#slider').nivoSlider({
directionNav: false, // 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
effect: 'slideInRight', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 450, // Slide transition speed
pauseTime: 7000, // How long each slide will show
});
});
</script>
What i would like it to do is have the text slide with the image. Can anyone assist?
JScript/JQuery are not my strong point at all, i know very very little.
Or can someone point me to something similar that would do what i am after?
Thanks for reading.
