cú băng chuyền cuộn để mục nhấp

Tôi có một đơn giản cú-băng chuyền,cú băng chuyền cuộn để mục nhấp

HTML:

<div class="owl-carousel"> 
    <div class="item"><h4>1</h4></div> 
    <div class="item"><h4>2</h4></div> 
    <div class="item"><h4>3</h4></div> 
    <div class="item"><h4>4</h4></div> 
    <div class="item"><h4>5</h4></div> 
    <div class="item"><h4>6</h4></div> 
    <div class="item"><h4>7</h4></div> 
    <div class="item"><h4>8</h4></div> 
    <div class="item"><h4>9</h4></div> 
    <div class="item"><h4>10</h4></div> 
    <div class="item"><h4>11</h4></div> 
    <div class="item"><h4>12</h4></div> 
</div>

JavaScript:

$('.owl-carousel').owlCarousel({ 
    items: 5, 
    loop:true, 
    nav:true, 
    margin: 10 
})

Bao gồm:

owl.carousel .js
owl.carousel.min.css

JSFiddle http://jsfiddle.net/93cpX/62/

Làm thế nào để buộc các cuộn băng chuyền vào mục nhấp?

Nguồn

2015-04-20 Mario

<html> 
<head> 

    <link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css"> 
    <style> 
     .owl-carousel .item { 
      height: 80px; 
      background: #4DC7A0; 
     } 
    </style> 

</head> 
<body> 
<div id="owl-demo"> 
    <div class="item"><h4>1</h4></div> 
    <div class="item"><h4>2</h4></div> 
    <div class="item"><h4>3</h4></div> 
    <div class="item"><h4>4</h4></div> 
    <div class="item"><h4>5</h4></div> 
    <div class="item"><h4>6</h4></div> 
    <div class="item"><h4>7</h4></div> 
    <div class="item"><h4>8</h4></div> 
    <div class="item"><h4>9</h4></div> 
    <div class="item"><h4>10</h4></div> 
    <div class="item"><h4>11</h4></div> 
    <div class="item"><h4>12</h4></div> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src='http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js'></script> 
<script type='text/javascript'> 

    $(document).ready(function() { 

     var owl = $("#owl-demo"); 

     owl.owlCarousel({ 

     items : 5, //10 items above 1000px browser width 
     itemsDesktop : [1000,5], //5 items between 1000px and 901px 
     itemsDesktopSmall : [900,3], // 3 items betweem 900px and 601px 
     itemsTablet: [600,2], //2 items between 600 and 0; 
     itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option 

     }); 

     // Custom Navigation Events 
     $(document).on('click', '.owl-item', function(){ 
      n = $(this).index(); 
      console.log(n) 
      $('.owl-wrapper').trigger('owl.goTo', n); 
     }); 


    }); 

</script> 



</body> 

</html>

Có vài sự cố với phiên bản và đó là lý do tại sao tôi gửi cho bạn trang html đầy đủ - hãy thử nó cho chính mình!

Nguồn

2015-04-20 13:24:15 Legendary

điều này không hoạt động ... Tôi muốn nhấp vào mục 5 và anh ấy đã chuyển đến trung tâm. – Mario

Ồ, xin lỗi, tôi hiểu - bạn phải di chuyển thủ công - hãy để tôi 5 phút và tôi giải quyết nó! – Legendary

Nó sẽ được legen, chờ đợi cho nó, dary! – Mario

Bạn có thể thử mã tiếp theo:

var sync2 = jQuery('.sync2').owlCarousel({ 
       loop:true, 
       margin:0, 
       nav:false, 
       dots:false, 
       responsive:{ 
        0:{ 
         items:4 
        } 
       }, 
       center: false, 
       navText: ["",""], 
       linked: ".sync1" 
      }); 


      sync2.on('click', '.owl-item', function(event) { 
       var target = jQuery(this).index();; 
       sync2.owlCarousel('current',target); 
      });

Nguồn

2017-03-28 11:50:08

Trong 3 năm: D gj anyway – Legendary

Hãy thử này >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>

$('button').trigger('to.owl.carousel', 1);

Nguồn

2017-10-31 10:34:54

cú băng chuyền cuộn để mục nhấp

Trả lời

Các vấn đề liên quan