Easy Slider jquery -can't see the next previeous buttons_问答_开发者

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

开发者 https://www.devze.com 2023-01-16 11:20 出处：网络

I\'m trying to use the easySlider jquery plugin. I want just to reproduce. http://cssglobe.com/lab/easyslider1.5/01.html

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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        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"></scrip开发者_开发问答t>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#slider").easySlider();

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="slider">
                <ul>
                    <li><a href="http://templatica.com/preview/30"><img src="images/slider/01.jpg" alt="Css Template Preview" /></a></li>
                    <li><a href="http://templatica.com/preview/7"><img src="images/slider/02.jpg" alt="Css Template Preview" /></a></li>
                    <li><a href="http://templatica.com/preview/25"><img src="images/slider/03.jpg" alt="Css Template Preview" /></a></li>
                    <li><a href="http://templatica.com/preview/26"><img src="images/slider/04.jpg" alt="Css Template Preview" /></a></li>
                    <li><a href="http://templatica.com/preview/27"><img src="images/slider/05.jpg" alt="Css Template Preview" /></a></li>
                </ul>

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

Thanks in advance.

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.

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>

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

精彩评论

关注公众号

热门标签

图文推荐

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：