The carousel owl scrolls until it clicks
I have a simple owl carousel
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 }) Included:
- owl.carousel.js
- owl.carousel.min.css
JSFiddle http://jsfiddle.net/93cpX/62/
How to make the carousel scroll to a click?
+6
3 answers
<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> There were few problems with the version, and that is why I am sending you the full html page - try it for yourself!
+5
You can try the following code:
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); }); +1