jcarousel не работает

Я использую jcarouselпервый раз на своем сайте и одновременно пытаюсь просматривать изображения в карусели 6 изображений

но controlsони не работают prevиnext

вот код, который я пробовал ...

В заголовке у меня есть эти файлы

<link rel="stylesheet" type="text/css" href=".../css/jcarousel.responsive.css">
<link rel="stylesheet" type="text/css" href=".../css/jcarousel.responsive.css">

<script type="text/javascript" src=".../js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src=".../js/jcarousel.responsive.js"></script>

вот тело

<div class="col-lg-12 cont-carousel">
      <div class="jcarousel-wrapper">
              <div class="jcarousel" data-jcarousel="true">
                  <ul>
                    <li ng-repeat="profile in ProfileData"><div class="thumb"><img src="{{profile.Image}}" alt=""></div><a href=".../{{profile.id}}"></a></li>
                  </ul>
              </div>
              <a href="" class="jcarousel-control-prev" data-jcarouselcontrol="true">a€?</a>
              <a href="" class="jcarousel-control-next" data-jcarouselcontrol="true">a€?</a>
              <p class="jcarousel-pagination"></p>
          </div>
    </div>

вот сценарий js jcarousel.responsive.js

(function($) {
    $(function() {
        var jcarousel = $('.jcarousel');

        jcarousel
             .on('jcarousel:reload jcarousel:create', function () {
                 var carousel = $(this),
                     width = carousel.innerWidth();

                 if (width >= 600) {
                     width = width / 3;
                 } else if (width >= 350) {
                     width = width / 2;
                 }

                 carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
             })
            .jcarousel({
                wrap: 'circular'
            });

        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1'
            });

         $('.jcarousel-pagination')
             .on('jcarouselpagination:active', 'a', function() {
                 $(this).addClass('active');
             })
             .on('jcarouselpagination:inactive', 'a', function() {
                 $(this).removeClass('active');
             })
             .on('click', function(e) {
                 e.preventDefault();
             })
             .jcarouselPagination({
                 perPage: 1,
                 item: function(page) {
                     return '<a href="#' + page + '">' + page + '</a>';
                 }
             });
    });
})(jQuery);

при нажатии на стрелки ничего не происходит, может кто-то помочь мне в этом ...

javascript,jcarousel,

0

Ответов: 0

jcarousel не работает

Я использую jcarouselпервый раз на своем сайте и одновременно пытаюсь просматривать изображения в карусели 6 изображений

но controlsони не работают prevиnext

вот код, который я пробовал ...

В заголовке у меня есть эти файлы

<link rel="stylesheet" type="text/css" href=".../css/jcarousel.responsive.css">
<link rel="stylesheet" type="text/css" href=".../css/jcarousel.responsive.css">

<script type="text/javascript" src=".../js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src=".../js/jcarousel.responsive.js"></script>

вот тело

<div class="col-lg-12 cont-carousel">
      <div class="jcarousel-wrapper">
              <div class="jcarousel" data-jcarousel="true">
                  <ul>
                    <li ng-repeat="profile in ProfileData"><div class="thumb"><img src="{{profile.Image}}" alt=""></div><a href=".../{{profile.id}}"></a></li>
                  </ul>
              </div>
              <a href="" class="jcarousel-control-prev" data-jcarouselcontrol="true">a€?</a>
              <a href="" class="jcarousel-control-next" data-jcarouselcontrol="true">a€?</a>
              <p class="jcarousel-pagination"></p>
          </div>
    </div>

вот сценарий js jcarousel.responsive.js

(function($) {
    $(function() {
        var jcarousel = $('.jcarousel');

        jcarousel
             .on('jcarousel:reload jcarousel:create', function () {
                 var carousel = $(this),
                     width = carousel.innerWidth();

                 if (width >= 600) {
                     width = width / 3;
                 } else if (width >= 350) {
                     width = width / 2;
                 }

                 carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
             })
            .jcarousel({
                wrap: 'circular'
            });

        $('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1'
            });

        $('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1'
            });

         $('.jcarousel-pagination')
             .on('jcarouselpagination:active', 'a', function() {
                 $(this).addClass('active');
             })
             .on('jcarouselpagination:inactive', 'a', function() {
                 $(this).removeClass('active');
             })
             .on('click', function(e) {
                 e.preventDefault();
             })
             .jcarouselPagination({
                 perPage: 1,
                 item: function(page) {
                     return '<a href="#' + page + '">' + page + '</a>';
                 }
             });
    });
})(jQuery);

при нажатии на стрелки ничего не происходит, может кто-то помочь мне в этом ...

00JavaScript, jcarousel,
Похожие вопросы