如何在轮播中拖动时调用函数

How to call a function when drag in carousel?

本文关键字：拖动调用函数更新时间：2023-09-26

顺便说一下，这段代码也可以工作，但还有一件事我想在用户单击拖动轮播项目时提醒（）或调用函数。我已阅读文档以使用轮播事件，但仍然找不到结果我将使用此 drag.owl.carousel dragged.owl.carousel 选项来提醒或调用函数，但它对我不起作用。

$.ajax({
   type: "GET",
   url: "<?php echo base_url('main/data/12'); ?>",
   dataType: "json",
   cache: false,
   success: function (data, st) {
       if (st == 'success') {
             $.each(data, function (i, obj) {
                  var out = '<div class="row item">';
                  out += '<div class="product">';
                  out += '<div class="image">';
                  out += '<a href=""><img src="asset/img/main/9.jpg" alt="img" class="img-responsive"></a>';
                  out += '<div class="promotion"><span class="discount">' + obj.prodId + '</span> </div>';
                  out += '<div class="description"><div class="price"><span>' + obj.prodPrice + '</span></div><h4><a href="#">' + obj.prodName + '</a></h4>';
                  out += '<p>short detial</p>';
                  out += '</div>';
                  out += '</div>';
                  $(out).appendTo(".owl-carousel");
              });
      }
      var owl = $(".owl-carousel");
      owl.on( 'drag.owl.carousel dragged.owl.carousel', function(e) {
             alert(e);
      });
      owl.owlCarousel({
          loop: true,
          nav: true,
          lazyLoad: true,
          margin: 10,
          video: true,
          responsive: {
             0: {
                 items: 1
               },
             600: {
                items: 3
                },
             960: {
                items: 5,
             },
             1200: {
                items: 6
            }
         }
       });
     }
    });

您的代码在 Owl Carousel 2.x 中运行良好。如果必须使用版本 1，则可以在初始化对象中提供事件侦听器作为 startDragging 属性：

owl.owlCarousel({
    loop: true,
    startDragging: function(e) {
        alert(e);
    },
    ...
});