admin管理员组

文章数量:1386829

The following is a code taken form Owl Carousel's own site. I don't know why the callback functions(here afterMove) are not called! Could anybody get the afterMove function called? For me it's not just afterMove, but none of the callbacks works!

<html>
<head>
  <!-- Owl Carousel -->
  <link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.carousel.min.css">

  <!-- Owl Default Theme -->
  <link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.theme.default.min.css">

  <style type="text/css">
    #owl-demo .item {
        background: #3fbf79;
        padding: 30px 0px;
        margin: 10px;
        color: #FFF;
        border-radius: 3px;
        text-align: center;
    }
  </style>
</head>
<body>
  <div id="owl-demo" class="owl-carousel">
    <div class="item"><h1>0</h1></div>
    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>
    <div class="item"><h1>5</h1></div>
    <div class="item"><h1>6</h1></div>
  </div>

<!-- jQuery -->
<script src="js/jquery/1.9.1/jquery.min.js"></script>
<!-- Owl Carousel -->
<script src="js/vendors/owl-carousel-2/owl.carousel.js"></script>

<script type="text/javascript">
  $(document).ready(function() {

  var owl = $("#owl-demo");
  owl.owlCarousel({
    navigation : true,
    afterMove : afterMove
  });

  function afterMove(){
    alert("Hey!");
  }
});
</script>
</body>
</html>

The following is a code taken form Owl Carousel's own site. I don't know why the callback functions(here afterMove) are not called! Could anybody get the afterMove function called? For me it's not just afterMove, but none of the callbacks works!

<html>
<head>
  <!-- Owl Carousel -->
  <link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.carousel.min.css">

  <!-- Owl Default Theme -->
  <link rel="stylesheet" href="js/vendors/owl-carousel-2/assets/owl.theme.default.min.css">

  <style type="text/css">
    #owl-demo .item {
        background: #3fbf79;
        padding: 30px 0px;
        margin: 10px;
        color: #FFF;
        border-radius: 3px;
        text-align: center;
    }
  </style>
</head>
<body>
  <div id="owl-demo" class="owl-carousel">
    <div class="item"><h1>0</h1></div>
    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>
    <div class="item"><h1>5</h1></div>
    <div class="item"><h1>6</h1></div>
  </div>

<!-- jQuery -->
<script src="js/jquery/1.9.1/jquery.min.js"></script>
<!-- Owl Carousel -->
<script src="js/vendors/owl-carousel-2/owl.carousel.js"></script>

<script type="text/javascript">
  $(document).ready(function() {

  var owl = $("#owl-demo");
  owl.owlCarousel({
    navigation : true,
    afterMove : afterMove
  });

  function afterMove(){
    alert("Hey!");
  }
});
</script>
</body>
</html>
  • javascript
  • jquery
  • owl-carousel
Share Improve this question edited Nov 6, 2018 at 17:18 isherwood 61.2k16 gold badges121 silver badges170 bronze badges asked Mar 27, 2015 at 7:03 Fighter JetFighter Jet 4071 gold badge6 silver badges21 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 3

you need to use new events with .on(), as per mentioned in its docs, as:

var owl = $("#owl-demo");
owl.owlCarousel({
    navigation : true
});
//register `change` event
owl.on('changed.owl.carousel', function(e) {
    alert("changed");
});

Demo :: jsFiddle

本文标签： javascriptCallback Functions(like afterMove) are not calledStack Overflow

版权声明：本文标题：javascript - Callback Functions(like afterMove) are not called - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744527004a2610803.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。