0

I have a page with 2 carousels. The arrows of the first one are controlling the second carousel and I don't know why. To be honest, I don't know a lot about all of this. Here's my code :

<div class="slider-container">
<div class="product-slider">
<div class="carousel">
<div class="slider">
<div class="slide"><a class="product-image" title="Le T-shirt &laquo; couture &raquo; &agrave; col montant" href="https://www.cavadesoi.com/fr/roxanne-noix-de-coco" target="_blank"> <img title="Magasinez notre coton &eacute;gyptien Karnak-Menoufi - Roxanne" alt="Magasinez notre coton &eacute;gyptien Karnak-Menoufi - Roxanne" src="{{media url="wysiwyg/roxanne_coconut_ajusted.jpg"}}" /> </a></div>
<div class="slide"><a class="product-image" title="Camisole en laine &laquo; deuxi&egrave;me peau &raquo;" href="https://www.cavadesoi.com/fr/gilda-ivoire" target="_blank"> <img title="Magasinez notre laine de m&eacute;rinos extra-fine - Gilda" alt="Magasinez notre laine de m&eacute;rinos extra-fine - Gilda" src="{{media url="wysiwyg/gilda_ivory_ajusted.jpg"}}" /> </a></div>
<div class="slide"><a class="product-image" title="Paris, la tuque en laine unisexe" href="https://www.cavadesoi.com/fr/paris-lynx" target="_self"> <img title="Magasinez nos accessoires en laine de m&eacute;rinos - Paris" alt="Magasinez nos accessoires en laine de m&eacute;rinos - Paris" src="{{media url="wysiwyg/paris_lynx_ajusted.jpg"}}" /> </a></div>
<div class="slide"><a class="product-image" title="Pull ballerine &agrave; d&eacute;tail point de croix" href="https://www.cavadesoi.com/fr/joyce-lychee" target="_blank"> <img title="Magasiner notre cachemire Alashan - Joyce" alt="Magasiner notre cachemire Alashan - Joyce" src="{{media url="wysiwyg/joyce_lychee_ajusted.jpg"}}" /> </a></div>
</div>
</div>
<div class="prev brands-arrow">&nbsp;</div>
<div class="next brands-arrow">&nbsp;</div>
</div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript">// <![CDATA[
jQuery('.product-slider > .carousel').iosSlider({
                    desktopClickDrag: true,
                    snapToChildren: true,
                    infiniteSlider: true,
                    navNextSelector: '.brands-arrow.next',
                    navPrevSelector: '.brands-arrow.prev',
                    lastSlideOffset: 3
                });
// ]]></script>
<div class="text-block">
<h4><a title="D&eacute;couvrez notre collection pour lui" href="https://www.cavadesoi.com/fr/men"><b>Pour lui</b></a></h4>
</div>
<div class="slider-container">
<div class="product-slider">
<div class="carousel">
<div class="slider">
<div class="slide"><a class="product-image" title="Le polo en jersey" href="https://www.cavadesoi.com/fr/hoche-chameau" target="_blank"> <img title="Magasinez notre laine de m&eacute;rinos 4 saisons - Hoche" alt="Magasinez notre laine de m&eacute;rinos 4 saisons - Hoche" src="{{media url="wysiwyg/hoche_camel_ajusted.jpg"}}" /> </a></div>
<div class="slide"><a class="product-image" title="La tuque en laine c&ocirc;tel&eacute;e" href="https://www.cavadesoi.com/fr/london-anthracite" target="_blank"> <img title="Magasinez notre collection d'accessoires - London" alt="Magasinez notre collection d'accessoires - London" src="{{media url="wysiwyg/london_anthracite_ajusted.jpg"}}" /> </a></div>
<div class="slide"><a class="product-image" title="Le basique pull &agrave; col roul&eacute;" href="https://www.cavadesoi.com/fr/louis-chameau" target="_blank"> <img title="Magasinez notre laine de m&eacute;rinos 4 saisons - Louis" alt="Magasinez notre laine de m&eacute;rinos 4 saisons - Louis" src="{{media url="wysiwyg/louis_camel_ajusted.jpg"}}" /> </a></div>
</div>
</div>
<div class="prev brands-arrow">&nbsp;</div>
<div class="next brands-arrow">&nbsp;</div>
</div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript">// <![CDATA[
jQuery('.product-slider > .carousel').iosSlider({
                    desktopClickDrag: true,
                    snapToChildren: true,
                    infiniteSlider: true,
                    navNextSelector: '.brands-arrow.next',
                    navPrevSelector: '.brands-arrow.prev',
                    lastSlideOffset: 3
                });
// ]]></script>
0

You have to change class name according to your slider

<div class="slider-container">
    <div class="product-slider">
        <div class="carousel">
            <div class="slider">
                <div class="slide">
                    <a class="product-image" title="Le T-shirt &laquo; couture &raquo; &agrave; col montant" href="https://www.cavadesoi.com/fr/roxanne-noix-de-coco" target="_blank"> 
                        <img title="Magasinez notre coton &eacute;gyptien Karnak-Menoufi - Roxanne" alt="Magasinez notre coton &eacute;gyptien Karnak-Menoufi - Roxanne" src="{{media url="wysiwyg/roxanne_coconut_ajusted.jpg"}}" /> 
                    </a>
                </div>
                <div class="slide">
                    <a class="product-image" title="Camisole en laine &laquo; deuxi&egrave;me peau &raquo;" href="https://www.cavadesoi.com/fr/gilda-ivoire" target="_blank"> 
                        <img title="Magasinez notre laine de m&eacute;rinos extra-fine - Gilda" alt="Magasinez notre laine de m&eacute;rinos extra-fine - Gilda" src="{{media url="wysiwyg/gilda_ivory_ajusted.jpg"}}" /> 
                    </a>
                </div>
                <div class="slide">
                    <a class="product-image" title="Paris, la tuque en laine unisexe" href="https://www.cavadesoi.com/fr/paris-lynx" target="_self"> 
                        <img title="Magasinez nos accessoires en laine de m&eacute;rinos - Paris" alt="Magasinez nos accessoires en laine de m&eacute;rinos - Paris" src="{{media url="wysiwyg/paris_lynx_ajusted.jpg"}}" /> 
                    </a>
                </div>
                <div class="slide">
                    <a class="product-image" title="Pull ballerine &agrave; d&eacute;tail point de croix" href="https://www.cavadesoi.com/fr/joyce-lychee" target="_blank"> 
                        <img title="Magasiner notre cachemire Alashan - Joyce" alt="Magasiner notre cachemire Alashan - Joyce" src="{{media url="wysiwyg/joyce_lychee_ajusted.jpg"}}" /> 
                    </a>
                </div>
            </div>
        </div>
        <div class="prev brands-arrow">&nbsp;</div>
        <div class="next brands-arrow">&nbsp;</div>
    </div>
    <div style="clear: both;">&nbsp;</div>
    <script type="text/javascript">// <![CDATA[
    jQuery('.product-slider > .carousel').iosSlider({
                        desktopClickDrag: true,
                        snapToChildren: true,
                        infiniteSlider: true,
                        navNextSelector: '.brands-arrow.next',
                        navPrevSelector: '.brands-arrow.prev',
                        lastSlideOffset: 3
                    });
    // ]]></script>
    <div class="text-block">
        <h4><a title="D&eacute;couvrez notre collection pour lui" href="https://www.cavadesoi.com/fr/men"><b>Pour lui</b></a></h4>
    </div>
<div class="slider-container">
    <div class="product-slider1">
        <div class="carousel1">
            <div class="slider">
                <div class="slide">
                    <a class="product-image" title="Le polo en jersey" href="https://www.cavadesoi.com/fr/hoche-chameau" target="_blank"> 
                        <img title="Magasinez notre laine de m&eacute;rinos 4 saisons - Hoche" alt="Magasinez notre laine de m&eacute;rinos 4 saisons - Hoche" src="{{media url="wysiwyg/hoche_camel_ajusted.jpg"}}" /> 
                    </a>
                </div>
                <div class="slide">
                    <a class="product-image" title="La tuque en laine c&ocirc;tel&eacute;e" href="https://www.cavadesoi.com/fr/london-anthracite" target="_blank"> 
                        <img title="Magasinez notre collection d'accessoires - London" alt="Magasinez notre collection d'accessoires - London" src="{{media url="wysiwyg/london_anthracite_ajusted.jpg"}}" /> 
                    </a>
                </div>
                <div class="slide">
                    <a class="product-image" title="Le basique pull &agrave; col roul&eacute;" href="https://www.cavadesoi.com/fr/louis-chameau" target="_blank"> 
                        <img title="Magasinez notre laine de m&eacute;rinos 4 saisons - Louis" alt="Magasinez notre laine de m&eacute;rinos 4 saisons - Louis" src="{{media url="wysiwyg/louis_camel_ajusted.jpg"}}" /> 
                    </a>
                </div>
            </div>
        </div>
        <div class="prev brands-arrow1">&nbsp;</div>
        <div class="next brands-arrow1">&nbsp;</div>
    </div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript">// <![CDATA[
jQuery('.product-slider > .carousel').iosSlider({
                    desktopClickDrag: true,
                    snapToChildren: true,
                    infiniteSlider: true,
                    navNextSelector: '.brands-arrow.next1',
                    navPrevSelector: '.brands-arrow.prev1',
                    lastSlideOffset: 3
                });
// ]]></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.