I've implemented an image slideshow on my website:
However, I'm facing an issue with a grey line appearing under the annotation.
Here is an example:
Below is the code snippet:
$(function(){
$('#slides').slides({
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
// example return of current slide number
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
Can anyone provide guidance on how to remove this grey line? Any suggestions or fixes would be greatly appreciated. Feel free to view the site's source for further details.
Here is the relevant HTML & CSS code:
<div id="slides">
<div class="slides_container" style="overflow: hidden;position: relative;display: inline-block;">
<div class="slides_control" style="position: relative; width: 3339px; height: 228px; left: -1113px;"><div class="slide" style="position: absolute; top: 0px; left: 2226px; z-index: 0; display: block;">
<a href="/eduforschools.php">
<img src="img/Slide1.jpg" width="1000px" height="225px" alt="Slide 1"></a>
<div class="caption" style="bottom: 0px;">
<p>We support recruitment & education in over 140 local schools.</p>
</div>
</div><div class="slide" style="position: absolute; top: 0px; left: 1113px; z-index: 5; display: block;">
<a href="/recruit.php">
<img src="img/Slide2.jpg" width="1000px" height="225px" alt="Slide 1"></a>
<div class="caption" style="bottom: 0px;">
<p>Apprenticeships – wide range available.</p>
</div>
</div></div>
</div>
<ul class="pagination"><li class="current"><a href="#0">1</a></li><li class=""><a href="#1">2</a></li></ul></div>
Thank you