http://owlgraphic.com/owlcarousel/demos/sync.html

 

1. $(document).ready(function() {
2.  
3. var sync1 = $("#sync1");
4. var sync2 = $("#sync2");
5.  
6. sync1.owlCarousel({
7. singleItem : true,
8. slideSpeed : 1000,
9. navigation: true,
10. pagination:false,
11. afterAction : syncPosition,
12. responsiveRefreshRate : 200,
13. });
14.  
15. sync2.owlCarousel({
16. items : 15,
17. itemsDesktop : [1199,10],
18. itemsDesktopSmall : [979,10],
19. itemsTablet : [768,8],
20. itemsMobile : [479,4],
21. pagination:false,
22. responsiveRefreshRate : 100,
23. afterInit : function(el){
24. el.find(".owl-item").eq(0).addClass("synced");
25. }
26. });
27.  
28. function syncPosition(el){
29. var current = this.currentItem;
30. $("#sync2")
31. .find(".owl-item")
32. .removeClass("synced")
33. .eq(current)
34. .addClass("synced")
35. if($("#sync2").data("owlCarousel") !== undefined){
36. center(current)
37. }
38. }
39.  
40. $("#sync2").on("click", ".owl-item", function(e){
41. e.preventDefault();
42. var number = $(this).data("owlItem");
43. sync1.trigger("owl.goTo",number);
44. });
45.  
46. function center(number){
47. var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
48. var num = number;
49. var found = false;
50. for(var i in sync2visible){
51. if(num === sync2visible[i]){
52. var found = true;
53. }
54. }
55.  
56. if(found===false){
57. if(num>sync2visible[sync2visible.length-1]){
58. sync2.trigger("owl.goTo", num - sync2visible.length+2)
59. }else{
60. if(num - 1 === -1){
61. num = 0;
62. }
63. sync2.trigger("owl.goTo", num);
64. }
65. } else if(num === sync2visible[sync2visible.length-1]){
66. sync2.trigger("owl.goTo", sync2visible[1])
67. } else if(num === sync2visible[0]){
68. sync2.trigger("owl.goTo", num-1)
69. }
70.  
71. }
72.  
73. });

html

1. <div id="sync1" class="owl-carousel">
2. <div class="item"><h1>1</h1></div>
3. <div class="item"><h1>2</h1></div>
4. <div class="item"><h1>3</h1></div>
5. <div class="item"><h1>4</h1></div>
6. <div class="item"><h1>5</h1></div>
7. <div class="item"><h1>6</h1></div>
8. <div class="item"><h1>7</h1></div>
9. <div class="item"><h1>8</h1></div>
10. <div class="item"><h1>9</h1></div>
11. <div class="item"><h1>10</h1></div>
12. <div class="item"><h1>11</h1></div>
13. <div class="item"><h1>12</h1></div>
14. <div class="item"><h1>13</h1></div>
15. <div class="item"><h1>14</h1></div>
16. <div class="item"><h1>15</h1></div>
17. <div class="item"><h1>16</h1></div>
18. <div class="item"><h1>17</h1></div>
19. <div class="item"><h1>18</h1></div>
20. <div class="item"><h1>19</h1></div>
21. <div class="item"><h1>20</h1></div>
22. <div class="item"><h1>21</h1></div>
23. <div class="item"><h1>22</h1></div>
24. <div class="item"><h1>23</h1></div>
25. </div>
26. <div id="sync2" class="owl-carousel">
27. <div class="item"><h1>1</h1></div>
28. <div class="item"><h1>2</h1></div>
29. <div class="item"><h1>3</h1></div>
30. <div class="item"><h1>4</h1></div>
31. <div class="item"><h1>5</h1></div>
32. <div class="item"><h1>6</h1></div>
33. <div class="item"><h1>7</h1></div>
34. <div class="item"><h1>8</h1></div>
35. <div class="item"><h1>9</h1></div>
36. <div class="item"><h1>10</h1></div>
37. <div class="item"><h1>11</h1></div>
38. <div class="item"><h1>12</h1></div>
39. <div class="item"><h1>13</h1></div>
40. <div class="item"><h1>14</h1></div>
41. <div class="item"><h1>15</h1></div>
42. <div class="item"><h1>16</h1></div>
43. <div class="item"><h1>17</h1></div>
44. <div class="item"><h1>18</h1></div>
45. <div class="item"><h1>19</h1></div>
46. <div class="item"><h1>20</h1></div>
47. <div class="item"><h1>21</h1></div>
48. <div class="item"><h1>22</h1></div>
49. <div class="item"><h1>23</h1></div>
50. </div>