Easy Slider jquery -can't see the next previeous buttons

Question

Hello everyone:

I'm trying to use the easySlider jquery plugin.i want just to reproduce.

http://cssglobe.com/lab/easyslider1.5/01.html

I see the images in a list,but can't see Next,Previous Links.

Do i should add them to my html even they are not in the demo page.

here is the code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EasySlider.aspx.cs" Inherits="jQuery.EasySlider" %>

img{border:none;} pre{ display:block; font:12px "Courier New", Courier, monospace; padding:10px; border:1px solid #bae2f0; background:#e3f4f9; margin:.5em 0; width:500px; }
#slider ul, #slider li{ margin:0; padding:0; list-style:none; } #slider li{

    width:696px;
    height:241px;
    overflow:hidden; 
    }
span#prevBtn{}
span#nextBtn{}  
</style>
<script src="easySlider1.5.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#slider").easySlider();

    }); 
</script>

    </div> 
    <a id="nextBtn"></a>    
    <a id="prevBtn"></a>
</div>
</form>

Thanks in advance.

Answer 1

hey amourgh,

With that plugin the element is generated by the code. Make sure you've uploaded the images and check your css to be sure you haven't overridden anything essential. Can you post the code in an example so I can see what's going on?

UPDATE:

In line 65 and 66 you don't have any of the rules listed for the

span#prevBtn{}
span#nextBtn{}

I believe, at first glance, you're missing all of this code:

#prevBtn, #nextBtn,
    #slider1next, #slider1prev{ 
        display:block;
        width:35px;
        height:35px;
        position:absolute;
        left:-15px;
        top:110px;
        z-index:1000;
        }   
    #nextBtn, #slider1next{ 
        left:940px;
        }                                                       
    #prevBtn a, #nextBtn a{  
        display:block;
        position:relative;
        width:53px;
        height:53px;
        background:url(../images/btn_prev.png) no-repeat 0 0;   
        }   
    #nextBtn a, #slider1next a{ 
        background:url(../images/btn_next.png) no-repeat 0 0;   
        }

Depending on the width and height of your div, you'll play with the left attribute to position the btns correctly.

Answer 2

You're missing the text in your anchor tags i.e.,

<a id="nextBtn"></a>    
<a id="prevBtn"></a>

Add some text to your anchor tags

<a id="nextBtn"> Next </a>    
<a id="prevBtn"> Previous </a>