Unvollständiges jQuery Karussell (Magento Shop)

Question

Jemand hat ein Karussell für unsere webshop gebaut, aber es funktioniert nicht richtig. Wenn Sie auf eine der Pfeiltasten klicken, werden die Bilder nach links oder rechts verschoben. Aber wie Sie vielleicht schon bemerkt haben, verschwinden die Bilder einfach in der Leere.

Offensichtlich sollte es zum ersten Bild gehen, wenn das letzte erreicht wurde und jemand auf "weiter" klickt, und auf das letzte Bild, wenn das erste erreicht wurde.

Hinweis: Der Grund, warum er "jQuery" anstelle von "$" verwendet, ist, weil "$" mit Magento in Konflikt steht.

Dies ist der Code, der verwendet wird:

HTML

<div class="gallery"> 
    <div id="moveleft">&lt;</div> 
    <ul class="gallery-content"> 
     <li> 
     <a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" data-lightbox="roadtrip"> 
     <img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" alt=""> 
     </a> 
     </li> 
     <li> 
      <a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" data-lightbox="roadtrip"> 
      <img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" alt=""> 
     </a> 
     </li> 
     <li> 
     <a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" data-lightbox="roadtrip"> 
      <img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" alt=""> 
     </a> 
     </li> 
     <li> 
     <a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" data-lightbox="roadtrip"> 
      <img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" alt=""> 
     </a> 
     </li> 
     <li> 
     <a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" data-lightbox="roadtrip"> 
      <img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" alt=""> 
     </a> 
     </li> 
     </ul> 
    <div id="moveright">&gt;</div> 
</div> 

CSS

ul, li { list-style: none; } 
.gallery { 
    min-height: 340px; 
    overflow:hidden; 
    margin-top: 40px; 
} 
.gallery ul.gallery-content { 
    margin-left: 55px; 
    margin-right: 55px; 
    max-height: 300px; 
    overflow:hidden; 
    margin-top: -300px; 
} 
.gallery img { 
    float:left; 
    padding: 3px; 
    margin: 0 10px; 
} 
.gallery #moveleft { 
    height: 300px; 
    width: 50px; 
    line-height: 300px; 
    border: #CCC solid 1px; 
    margin-left: 0px; 
    font-size:45px; 
    padding-left: 2px; 
} 
.gallery #moveright { 
    height: 300px; 
    width: 50px; 
    line-height: 300px; 
    font-size:45px; 
    float: right; 
    margin-top: -300px; 
    padding-left: 2px; 
    border: #CCC solid 1px; 
} 

JS

jQuery(document).ready(function() { 
    jQuery('.gallery #moveleft').click(function() { 
     jQuery('.gallery li').animate({ 
     'marginLeft' : "-=300px" //moves left 
     }); 
    }); 
    jQuery('.gallery #moveright').click(function() { 
     jQuery('.gallery li').animate({ 
     'marginLeft' : "+=300px" //moves right 
     }); 
    }); 
}); 

Answer 1

Ich würde empfehlen, OwlCarousel für einfache jQuery Karussell auf Magento zu verwenden. Dieses jQuery-Plugin unterstützt auch Touch-Slide (funktioniert sehr gut auf Handy), was ein Plus ist, wenn Ihre Magento-Website reagiert.

Hoffe diese Hilfe