I have the easySlider 1.7 installed on a website that I am working on. For some reason, no matter what I do the next and previous buttons do not show up at all. I am not that new to the whole jQuery thing but I am completely stumped after trying so many different options. I have below my code for the CSS, the jQuery for the slider and my html. Please note I have the slider jQuery in a seperate .js file called, "banner.js" and my CSS is attached to main CSS file. I could really just be overlooking something but I have been looking up and down, all around the web for a solution. Thank you in advance!
CSS:
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
height:290px;
width:1024px;
overflow:hidden;
}
#slider{
margin-left:0px;
}
#prevBtn, #nextBtn{
width:30px;
height:77px;
float:left;
left:0px;
top:50px;
}
#nextBtn{
left:1024px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
`
The jQuery Slide Function:
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
pause:3000,
continuous: true,
controlsShow:true,
prevId:'prevBtn',
nextId:'nextBtn'
});
})`
The HTML Markup:
<div id="wrapper">
<div class="nav">
</div>
<div class="banner">
<div id="slider">
<ul>
<li><img src="images/banner/img001.png" alt="001" /></li>
<li><img src="images/banner/img002.png" alt="002" /></li>
<li><img src="images/banner/img003.png" alt="003" /></li>
</ul>
</div>
</div>
<div class="mxNav">
<p class="mxNavText"> Order Now! </p>
</div>
Here is a link to where i tested your code. the only difference between what you have and what I have is the images and the file paths to those images. I would assume at this point that there might be a file path issue.
http://d2burke.com/exp/es_test/
i use this plug in ALL the time and even extended it's functionality. post a link to your code if you'd like. i'd be glad to take a look