JQuery плагин Codaslider - PullRequest
Новая
       27

JQuery плагин Codaslider

0 голосов
/ 07 февраля 2012

Я пытаюсь использовать плагин codaslider, и он не работает для меня.Я думаю, что я делаю все правильно, но все еще не работает.Может ли кто-нибудь помочь мне узнать, что я делаю ошибку.Вот мой код ниже.Проблема в том, что он не скользит от одной панели к другой.Я уже просмотрел документацию, но я не знаю, какую ошибку я здесь совершаю. 

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="plugins/jquery.coda-slider-2.0.js"></script>
    <script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script>
    <script type="text/javascript">
    $().ready(function() {
       $('#codaslider5').codaSlider({
           dynamicArrows: false,
           dynamicTabs: false
       });
    });
    </script>
    <style>
        #nav { width: 500px; background: blue; height: 50px; }
        ul { list-style: none; margin: 0; }
        #mainWrapper #nav ul li { float: left; margin-right: 40px; }
        #slider { width: 500px; background: red; overflow: hidden; }
        .codaslider { width: 1500px; background: greenyellow; }
        .panel { width: 500px; height: 100px; float: left; }
        .panel1 { background: green; }
        .panel2 { background: lightblue; }
        .panel3 { background: yellow; }
    </style>
    <title>title</title>
</head>
<body>
    <div id="mainWrapper">
        <div id="nav">
            <ul>
                <li class="tab1"><a href="#1">Panel 1</a></li>
                <li class="tab2"><a href="#2">Panel 2</a></li>
                <li class="tab3"><a href="#3">Panel 3</a></li>
            </ul>
        </div>
        <div id="slider">
            <div class="codaslider" id="codaslider5">
                <div class="panel panel1">
                    <h2>Panel 1</h2>
                    <p>This is panel 1</p>
                </div>
                <div class="panel panel2">
                    <h2>Panel 2</h2>
                    <p>This is panel 2</p>
                </div>
                <div class="panel panel3">
                    <h2>Panel 3</h2>
                    <p>This is panel 3</p>
                </div>
            </div>
        </div>
    </div>
</body>

1 Ответ

1 голос
/ 08 февраля 2012

Ну, я, должно быть, возился с этим последние час или около того, удивляясь, почему это не сработало, потому что, как и вы, потому что все выглядело так, как будто все должно быть в порядке.

Я думаю, что нашел решение. Похоже, что codaSlider требователен к именам, которые вы даете объектам-слайдерам - они должны содержать тире и должны быть в последовательном порядке.

Ваш слайдер называется «# codaslider5», вам нужно изменить его на «# coda-slider-1» (если вы используете 2, 3 ... n, он не работает - предположительно, он ожидает, что вы на самом деле имеете ползунки 1, 2, 3, 4, если вы хотите использовать идентификатор 5).

Вот и мы:

Изменение: 

$('#codaslider5').codaSlider({

до 

$('#coda-slider-1').codaSlider({


Далее, изменить: 

<div id="nav">

до 

<div id="coda-nav-1">


Далее, изменить: 

<div class="codaslider" id="codaslider5">

до 

<div class="coda-slider" id="coda-slider-1">


Или для ленивости здесь фиксированный файл , а diff .

Это испортит ваш CSS, так что вам придется это исправить. Но, надеюсь, это вернет вас в нужное русло.

...