Незавершенная Карусель jQuery (Magento Shop)

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

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

Примечание: причина, по которой он использовал «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
        });
    });
});

1 ответ

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

    Надеемся на эту помощь