Как сделать 2 слайдера на странице?

Question

[GeorgeStepanov]

Здравствуйте. Есть простой слайдер. Прикрепляю код.
Как сделать два и более типичных слайдеров на одной странице? Заранее спасибо.

<p><img id="largeImg" src="documents/works/one_one.png" alt="Large image"></p>

  <ul id="thumbs">
    <!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
    <li>
      <a href="documents/works/one_one.png" title="Image 2"><img src="documents/works/one_one.png"></a>
    </li>
    <li>
      <a href="documents/works/one_two.png" title="Image 3"><img src="documents/works/one_two.png"></a>
    </li>
    <li>
      <a href="documents/works/one_three.png" title="Image 4"><img src="documents/works/one_three.png"></a>
    </li>
    <li>
      <a href="documents/works/one_four.png" title="Image 5"><img src="documents/works/one_four.png"></a>
    </li>
    <li>
      <a href="documents/works/one_six.png" title="Image 6"><img src="documents/works/one_six.png"></a>
    </li>
  </ul>

#largeImg {
  border: solid 1px #ccc;
  width: 500px;
  height: 350px;
  padding: 5px;
  margin-top: 100px;
}

#thumbs a {
    border: solid 1px #dcdcdc;
    width: 95px;
    height: auto;
    padding: 3px;
    margin-right: 6px;
    float: left;
}

#thumbs a img {
    width: 100%;
}


#thumbs a:hover {
  border-color: #FF9900;
}

#thumbs li {
  list-style: none;
}

#thumbs {
  margin: 0;
  padding: 0;
}

<script>
    var largeImg = document.getElementById('largeImg');

    var thumbs = document.getElementById('thumbs');

    thumbs.onclick = function(e) {
      var target = e.target;

      while (target != this) {

        if (target.nodeName == 'A') {
          showThumbnail(target.href, target.title);
          return false;
        }

        target = target.parentNode;
      }

    }

    function showThumbnail(href, title) {
      largeImg.src = href;
      largeImg.alt = title;
    }


    /* предзагрузка */
    var imgs = thumbs.getElementsByTagName('img');
    for (var i = 0; i < imgs.length; i++) {
      var url = imgs[i].parentNode.href;
      var img = document.createElement('img');
      img.src = url;
    }
  </script>

Answer 1

[Владимир]

Задать разгые id для соответствущих элементов слайдеров:

Слайдер 1:

<p><img id="largeImg-1" src="documents/works/one_one.png" alt="Large image"></p>

  <ul id="thumbs-1">

Слайдер 2:

<p><img id="largeImg-2" src="documents/works/one_one.png" alt="Large image"></p>

  <ul id="thumbs-2">

Поправить стили типа:

#largeImg-1, #largeImg-2{
  border: solid 1px #ccc;
  width: 500px;
  height: 350px;
  padding: 5px;
  margin-top: 100px;
}

.......
.......

Соответственно в js отрабатывать тот или иной слайдер по id.

Comments

[GeorgeStepanov]

Вот с JS вся и загвоздка.

[Владимир]

GeorgeStepanov: например?

[GeorgeStepanov]

Владимир: пытаюсь менять название переменных, не получается пока что.

[Владимир]

GeorgeStepanov:
Ваш js нужно обернуть в функцию и передавать ей в качестве параметра тот или иной id (в зависимости от того, на котором происходит событие hover)
Написано только что