owl 轮播滚动到点击的项目

Question

我有一个简单的 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
})

包括：

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

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

如何强制轮播滚动到点击的项目？

Answer 1

<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>

版本几乎没有问题，这就是我向您发送完整 html 页面的原因 - 您自己试试吧！

Answer 2

您可以尝试下一个代码：

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);
            });

Answer 3

试试这个>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

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

Answer 4

上面的

None 对我有用，我只是存储了最后一次单击的项目的索引，并执行了以下代码：

//Select by id  if one is set or via  '$("".owl-carousel)'
var $carouselElement = $('#owl_carousel_id')

for(var i =0; i<lastClickedIndex; i++ ){
    $carouselElement.trigger('next.owl.carousel');
}

请注意：我的用例有点不同，我有多个垂直堆叠的轮播。单击项目时，它将存储索引和轮播 ID。当用户离开并返回原始页面时，它会自动滚动到正确的轮播和轮播项目。**

//滚动到最后选择的轮播

$('html,body').animate({scrollTop: $carouselElement.offset().top},'fast');

 //scroll to last clicked item
 for(var i =0; i<lastClickedIndex; i++ ){
     $carouselElement.trigger('next.owl.carousel');
 }

owl 轮播滚动到点击的项目

owl carousel scroll to clicked item

javascript

jquery

web

owl-carousel