0

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.

2
Contributors
1
Reply
3
Views
4 Years
Discussion Span
Last Post by AleMonteiro
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.