Блог

здравствуйте, я пытаюсь реализовать веб-сайт, на котором есть аккордеон и слайдер.

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

то же самое для второго набора accordion, но я не могу реализовать два слайдера на одной странице.

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

http://bakasura.in/delight/

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

У вас также есть несколько копий JavaScript-файлов accordion и 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 набора кнопок prev / next, и каждый из них имеет одинаковое значение Id. Вы должны создать уникальные значения Id, а затем использовать функции prevId и NextID easyslider для выбора правильных значений:

О кнопках:

 <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 по умолчанию.