Незавершенная карусель jQuery (магазин Magento)

Question

Кто-то построил карусель для нашего webshop, но он не работает правильно. Когда вы нажимаете одну из кнопок со стрелками, изображения перемещаются влево или вправо. Но, как вы уже заметили, изображения просто исчезают в пустоте.

Очевидно, что он должен перейти к первому изображению, когда последний достигнут, а кто-то нажмет на «следующий» и до последнего изображения, когда первый достигнут.

Примечание: причина, по которой он использовал «jQuery» вместо «$», заключается в том, что «$» находится в конфликте с Magento.

Это код, который используется:

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

Я бы рекомендовал использовать OwlCarousel для простой карусели jQuery на Magento. Этот плагин jQuery также поддерживает сенсорный слайд (очень хорошо работает на мобильных устройствах), что является плюсом, если ваш сайт Magento реагирует.

Надеюсь, эта помощь