Плагин Easy Slider Jquery - PullRequest
Новая
       16

Плагин Easy Slider Jquery

0 голосов
/ 14 апреля 2011

Привет! Я пытаюсь создать веб-сайт с аккордеоном и слайдером.

Это работает так.Первый набор аккордеонов открыт под нагрузкой.Ползунок в этом порту просмотра является горизонтальным.

То же самое для второго набора аккордеона. Но я не могу реализовать два ползунка на одной странице.

Я использую следующий плагин: http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

http://bakasura.in/delight/

1 Ответ

1 голос
/ 14 апреля 2011

Я вижу пару вопросов.Во-первых, вы используете не ту версию easySlider.Похоже, вы используете более старую версию вместо более новой версии 1.7: http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

На вашей странице также есть несколько копий JavaScript-файла для гармошки и easyslider: 

<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/jquery.accordion.min.js"></script>
<script type="text/javascript" src="js/easySlider.js"></script>
<script type="text/javascript" src="js/easySlider.packed.js"></script>

Нет необходимости в обоих, вам нужно выбрать одну или другую: 

<script type="text/javascript" src="js/jquery.accordion.min.js"></script>
<script type="text/javascript" src="js/easySlider.js"></script>

Другая проблема заключается в том, что у вас есть 2 набора кнопок «предыдущий / следующий», и у каждой из них одинаковое значение Id.Вам необходимо создать уникальные значения Id, а затем использовать функции easidlider для prevId и nextId, чтобы выбрать правильные:

О кнопках: 

<div class="sub-next"><span id="aboutNextBtn"><a href="javascript:void(0);"><img src="images/control_next.png"></a></span></div>
<div class="sub-prev"><span id="aboutPrevBtn"><a href="javascript:void(0);"><img src="images/control_back.png"></a></span></div>

Рабочие кнопки: 

<div class="control-prev"> <span id="workNextBtn"><a href="javascript:void(0);"><img src="images/control_prev.gif" width="36" height="30"></a></span></div>
<div class="control-next"><span id="workPrevBtn"><a href="javascript:void(0);"> <img src="images/control_nxt.gif" width="36" height="30"></a></span></div>

Новый код jQuery: 

$("#slider").easySlider({
    prevId: 'aboutPrevBtn',
    nextId: 'aboutNextBtn',
    continuous: true, 
    controlsShow: false
});

$("#workcase").easySlider({
    prevId: 'workNextBtn', 
    nextId: 'workPrevBtn', 
    controlsShow: false
});

Обратите внимание, как опция controlsShow используется для скрытия элементов управления по умолчанию easySlider.

...