Salve a tutti,

ho un problema ad utillizzare iCarousel
per realizzare una serie di carousel diversi nella stessa pagina, ognuno indipendente?

Pensavo che il codice di seguito postato potesse essere una soluzione.

Codice PHP:
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushCss.js"></script>
<script type="text/javascript" src="js/iCarousel.js"></script>

<script type="text/javascript">

window.addEvent("domready", function() {
    new iCarousel("vetrina-contentA", {
        idPrevious: "vetrina-prevA",
        idNext: "vetrina-nextA",
        idToggle: "undefined",
        item: {
            klass: "item",
            size: 107
        },
        animation: {
            duration: 250,
            amount: 4
        }
    });

    new iCarousel("vetrina-contentB", {
        idPrevious: "vetrina-prevB",
        idNext: "vetrina-nextB",
        idToggle: "undefined",
        item: {
            klass: "item",
            size: 107
        },
        animation: {
            duration: 250,
            amount: 4
        }
    });

});

</script>

<div class="vetrinaBlock">
[img]css/img/frecciasx.png[/img]    
<div id="vetrinaAContainer">
<div id="vetrinaWrapperA">
<div id="vetrinaA">
    <ul style="left: -3096px; visibility: visible; opacity: 1;" id="vetrina-contentA">
    <li class="item">[url="#"][img]css/img/1.png[/img][/url]
    <li class="item">[url="#"][img]css/img/2.png[/img][/url]
    <li class="item">[url="#"][img]css/img/3.png[/img][/url]
    <li class="item">[url="#"][img]css/img/4.png[/img][/url]
    <li class="item">[url="#"][img]css/img/5.png[/img][/url]
    <li class="item">[url="#"][img]css/img/6.png[/img][/url]
    <li class="item">[url="#"][img]css/img/7.png[/img][/url]    
    <li class="item">[url="#"][img]css/img/8.png[/img][/url]
    [/list]
</div> 
</div> 
</div> 
[img]css/img/vetrineServizi/frecciadx.png[/img]
</div> 

<div class="clear"/></div>

<div class="vetrinaBlock">
[img]css/img/frecciasx.png[/img]    
<div id="vetrinaBContainer">
<div id="vetrinaWrapperB">
<div id="vetrinaB">
    <ul style="left: -3096px; visibility: visible; opacity: 1;" id="vetrina-contentB">
    <li class="item">[url="#"][img]css/img/1.png[/img][/url]
    <li class="item">[url="#"][img]css/img/2.png[/img][/url]
    <li class="item">[url="#"][img]css/img/3.png[/img][/url]
    <li class="item">[url="#"][img]css/img/4.png[/img][/url]
    <li class="item">[url="#"][img]css/img/5.png[/img][/url]
    <li class="item">[url="#"][img]css/img/6.png[/img][/url]
    <li class="item">[url="#"][img]css/img/7.png[/img][/url]    
    <li class="item">[url="#"][img]css/img/8.png[/img][/url]
    [/list]
</div> 
</div> 
</div> 
[img]css/img/frecciadx.png[/img]
</div> 
Se faccio tanti blocchi di script tanti quanti sono le liste a cui voglio applicare l'effetto e usando id differenti, pensavo funzionasse... :master:
... e invece anche il secondo blocco "<ul>[/list]" di immagini mi viene visualizzato sempre nel primo new iCarousel("vetrina-contentXYZ " che definisco nello script.

Come posso modificare il javascript affinchè funzioni?

Grazie in anticipo!!!