Один и тот-же скрипт несколько раз на странице

[Menro]

Всем привет!
К сожалению, я очень плохо разбираюсь в JS, да и вообще в программировании не силен.
Из-за этого, прошу Вашей помощи!

Имею вот такая страницу:

Под первым изображением реализован слайдер: Рекомендуемые товары для этой коллекции.
К сообщению прикрепил файлик: jquery.flexisel.js, который отвечает за анимацию.
Далее скрипт запускается следующим кодом:

<script type="text/javascript">

$(window).load(function() {
    $("#flexiselDemo1").flexisel();
    $("#flexiselDemo2").flexisel({
        enableResponsiveBreakpoints: true,
        responsiveBreakpoints: {
            portrait: {
                changePoint:480,
                visibleItems: 5
            },
            landscape: {
                changePoint:640,
                visibleItems: 5
            },
            tablet: {
                changePoint:768,
                visibleItems: 5
            }
        }
    });

    $("#flexiselDemo3").flexisel({
        visibleItems: 5,
        animationSpeed: 1000,
        autoPlay: true,
        autoPlaySpeed: 3000,           
        pauseOnHover: true,
        enableResponsiveBreakpoints: true,
        responsiveBreakpoints: {
            portrait: {
                changePoint:480,
                visibleItems: 1
            },
            landscape: {
                changePoint:640,
                visibleItems: 2
            },
            tablet: {
                changePoint:768,
                visibleItems: 3
            }
        }
    });

    $("#flexiselDemo4").flexisel({
        clone:false
    });
   
});
</script>

Ну и сам HTML у меня выглядит вот так:

<ul id="flexiselDemo1">
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
  <li><a href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li></ul>

В таком виде у меня всё работает. Но вот только мне нужно подобное сделать для каждого товара. Я вставил точно такой же HTML-код для второго товара, но по умолчанию слайдер скрыт и не работает.

Помогите пожалуйста, как мне вставить этот слайдер несколько раз на странице, от 1-го до 20-ти раз...

 

[aniucum]

для начала стоит разобраться с таблицами стилей и html
в работающем слайдере список из картинок у вас обёрнут в <div class="nbs-flexisel-container">...</div>, а в других просто вставлены в виде обычного списка <ul id="flexiselDemo1">...</ul>

 

[NDK13]

$(window).load(function() {
$("#flexiselDemo1").flexisel();
$("#flexiselDemo2").flexisel();
$("#flexiselDemo3").flexisel();
$("#flexiselDemo4").flexisel();
}

и далее менять в каждом товаре id

<ul id="flexiselDemo1">
<li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
<li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
</ul>

<ul id="flexiselDemo2">
<li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
<li><a rel="lightbox" href="http://site.ru/slider/images/varino6.jpg"><img src="http://site.ru/slider/images/varino6.jpg" /></a></li>
</ul>