Easy Slider jquery - не вижу следующих превалирующих кнопок - PullRequest
Новая
       0

Easy Slider jquery - не вижу следующих превалирующих кнопок

1 голос
/ 13 сентября 2010

Я пытаюсь использовать плагин easySlider jquery. Я хочу просто воспроизвести.

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

Я вижу изображения в списке, но не вижу следующих / предыдущих ссылок.

Должен ли я добавить их в мой HTML, даже если они не находятся на демонстрационной странице?

Вот код: 

<%@ 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"></script>
    <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>

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 13 сентября 2010

Вам не хватает текста в ваших тегах привязки, т. Е. 

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

Добавьте текст в теги привязки 

<a id="nextBtn"> Next </a>    
<a id="prevBtn"> Previous </a>
0 голосов
/ 13 сентября 2010

С этим плагином элемент генерируется кодом. Убедитесь, что вы загрузили изображения и проверьте свой CSS, чтобы убедиться, что вы не изменили ничего существенного. Можете ли вы опубликовать код в примере, чтобы я мог видеть, что происходит?

UPDATE:

В строках 65 и 66 у вас нет ни одного из правил, перечисленных для 

span#prevBtn{}
span#nextBtn{}

Я полагаю, на первый взгляд, вам не хватает всего этого кода: 

#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;   
        }

В зависимости от ширины и высоты вашего div, вы будете играть с атрибутом left, чтобы правильно расположить btns.

...