Catch Event dots click in owl carousel

Thảo luận trong 'Lập trình Javascript, js' bắt đầu bởi seolagi, 2/11/21.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    859
    Đã được thích:
    73
    Điểm thành tích:
    28
    Như câu hỏi trên, hoặc nghĩa là: mình muốn bắt sự kiện click của owl-dots, mỗi khi click vào owl-dot bất kỳ nào đó nó sẽ tự động chuyển slider và active vào owl-dots hiện tại được click trên trang.

    Hiện tại em đang làm cái slider, em muốn click ra bên ngoài div có class="clickchangedot" nó cũng chạy slider qua slider kế tiếp, không nhất thiết phải click đúng vào cái owl-dot.
    HTML:
    $( '.clickchangedot' ).on( 'click', function() {
    //gọi nó như thế nào giúp em cái hàm
      $( '.owl-dot' ).removeClass( 'active' );
      $(this).addClass( 'active' );
    })
     
    Cảm ơn đã xem bài:

    Catch Event dots click in owl carousel

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,536
    Đã được thích:
    1,102
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Của bạn đây, code của bạn trên sửa thành:
    Mã:
    var owl = $('.owl-carousel');
    
    $( '.clickchangedot' ).on( 'click', function() {
          owl.trigger('to.owl.carousel', [$(this).index(), 300]);
          $( '.cs-owl-dot' ).removeClass( 'active' ); //tắt mở cái này để test muốn xóa hoặc add class activate
          $(this).addClass( 'active' ); //tắt mở cái này để test muốn xóa hoặc add class activate
    });
    
     
    seolagi thích bài này.
  3. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    859
    Đã được thích:
    73
    Điểm thành tích:
    28
    Code tuyệt vời, thanks admin, em đã xử lý được sự kiện trên.
    HTML:
    var owl = $('.owl-carousel');
    $( '.clickchangedot' ).on( 'click', function() {
          owl.trigger('to.owl.carousel', [$(this).index(), 300]);
          //$( '.cs-owl-dot' ).removeClass( 'active' );
          //$(this).addClass( 'active' );
    });
     


Like và Share ủng hộ ITSEOVN