Hi

I am having a nightmare with nivoslider and its captions, I moved the captions outside of the nivoslider so they appear next to the slideshow but for some reason, caption1 has duplicated and will not disppaear, never had this issue before and is giving me a right headache, I can't work out why, below is my coding

Code:
<div class="slideshow">
<div class="slider-wrapper theme-default"> 
<div id="slider" class="nivoSlider">     
<img src="images/slideshow/home-healthcare-1.jpg" alt="" title="#htmlcaption1"/>    
<img src="images/slideshow/home-healthcare-2.jpg" alt="" title="#htmlcaption2" />     
<img src="images/slideshow/home-healthcare-3.jpg" alt="" title="#htmlcaption3" />     
<img src="images/slideshow/home-healthcare-4.jpg" alt="" title="#htmlcaption4"/>
</div>
</div>
</div>

<div id="htmlcaption1" class="nivo-caption">     
<h3 class="slide-titles">Palliative Care</h3>
<div class="caption-text">
J & S Health care specialist team are trained in palliative care. We ensure the best possible support is given to both clients and their loved ones throughout this delicate time.
</div>
<div class="button">
<a class="button" href="services.php">FIND OUT MORE</a>
</div>
</div>

<div id="htmlcaption2" class="nivo-caption">
<h3 class="slide-titles">Paediatric Health Care</h3>
<div class="caption-text">
It can be a worrying time when your child is ill. Our specialist carers will provide support and care to make your child feel as comfortable as possible. We can liase with your child's hospital team or case worker to ensure the best possible care.
</div>
<div class="button">
<a class="button" href="services.php">FIND OUT MORE</a>
</div>
</div>

<div id="htmlcaption3" class="nivo-caption">
<h3 class="slide-titles">Home Care</h3>
<div class="caption-text">
Our friendly experienced home care nurses can attend once a day to administer medication, change dressings and check blood pressure. A friendly face and a chat can really help to brighten someones day.
</div>
<div class="button">
<a class="button" href="services.php">FIND OUT MORE</a>
</div>
</div>

<div id="htmlcaption4" class="nivo-caption">
<h3 class="last-slide-title">Life Comes First</h3>
<div class="caption-text">
We pride ourselves on offering the highest level of home health care to clients of all ages and all needs. Our clients well being and care is our absolute top priority. Contact us for informal chat to find out how we can help.
In my header.php file, I have the following

Code:
<link rel="stylesheet" href="./css/nivo-slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="./js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript"> 
$(window).load(function() {
    $('#slider').nivoSlider({ 
    effect: 'random',                 // Specify sets like: 'fold,fade,sliceDown' 
    slices: 15,                       // For slice animations 
    boxCols: 8,                       // For box animations 
    boxRows: 4,                       // For box animations 
    animSpeed: 500,                   // Slide transition speed 
    pauseTime: 8000,                  // How long each slide will show 
    startSlide: 0,                    // Set starting Slide (0 index) 
    directionNav: true,               // Next & Prev navigation 
    controlNav: true,                 // 1,2,3... navigation 
    controlNavThumbs: false,          // Use thumbnails for Control Nav 
    pauseOnHover: true,               // Stop animation while hovering 
    manualAdvance: false,             // Force manual transitions 
    prevText: 'Prev',                 // Prev directionNav text 
    nextText: 'Next',                 // Next directionNav text 
    randomStart: false,               // Start on a random slide 
    beforeChange: function(){},       // Triggers before a slide transition 
    afterChange: function(){},        // Triggers after a slide transition 
    slideshowEnd: function(){},       // Triggers after all slides have been shown 
    lastSlide: function(){},          // Triggers when last slide is shown 
    afterLoad: function(){}           // Triggers when slider has loaded 
});
}); 
</script>

<!-- Include the theme stylesheet in the <head> section -->
<link rel="stylesheet" href="./css/default.css" type="text/css" />
here is the link to the site to see the issue - J & S Healthcare