Нужна помощь..
 

Добрый всем день! Помогите советом, пожалуйста. Есть jquery слайдер адаптированный под мои нужды, стоит на страничке, всё работает и устраивает. Но появилась задача на ЭТУ же страничку поставить еще 3 точно таких же галереи с другими изображениями. При копировании html кода, вторая галерея появляется, но скрипт к ней не подключается почему-то.

Сам скрипт

<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        var carousel = $("#carousel").waterwheelCarousel({
          flankingItems: 3,
          movingToCenter: function ($item) {
            $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');
          },
          movedToCenter: function ($item) {
            $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');
          },
          movingFromCenter: function ($item) {
            $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');
          },
          movedFromCenter: function ($item) {
            $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');
          },
          clickedCenter: function ($item) {
            $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
          }
        });

        $('#prev').bind('click', function () {
          carousel.prev();
          return false
        });

        $('#next').bind('click', function () {
          carousel.next();
          return false;
        });

        $('#reload').bind('click', function () {
          newOptions = eval("(" + $('#newoptions').val() + ")");
          carousel.reload(newOptions);
          return false;
        });

      });
    </script>

и html

<div id="carousel">Разработка логотипов
<img src="images/dizain/logo/1.jpg" alt="Image 1" />
<img src="images/dizain/logo/2.jpg" alt="Image 2" />
<img src="images/dizain/logo/3.jpg" alt="Image 3" />
<img src="images/dizain/logo/4.jpg" alt="Image 4" />
<img src="images/dizain/logo/5.jpg" alt="Image 5" />

</div>

Что в такой ситуации делать?

Musica24,
не использовать id, инициализацию устанавливать циклом по классам

а можно здесь поподробнее, не совсем понял.

Musica24,
примерно так

$(function() {
    $(".carousel").each(function(indx, el) {
        var carousel = $(el).waterwheelCarousel({});
        $('.prev', el).on('click', function() {
            carousel.prev();
            return false
        });

        $('.next', el).on('click', function() {
            carousel.next();
            return false;
        });

    });
})

подскажите, пожалуйста, как для этой карусели сделать вверху рабочие иконки-превьюшки

malkowych,
разместить иконки и связать в клике с соответсвующей картинкой, если самому сложно тогда раздел работа.

спасибо за ОЧЕНЬ ценный совет !!!

malkowych,

логику я понимаю, только у меня проблема с реализацией на javascript
какая цена за эту реализацию?