猫头鹰轮播滚动到点击的项目答案

【问题标题】：owl carousel scroll to clicked item猫头鹰轮播滚动到点击的项目
【发布时间】：2015-06-27 05:51:22
【问题描述】：

我有一个简单的猫头鹰旋转木马，

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/

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

【问题讨论】：

标签： javascript jquery web owl-carousel

【解决方案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 页面 - 你自己试试吧！

【讨论】：

这不起作用...我想点击一个项目 5 并且他已移动到中心。
哦，对不起，我明白了 - 你必须手动移动 - 让我 5 分钟，我解决它！
这将是传奇，等待它，dary！
@马里奥兄弟！！检查它 - 我不能在小提琴中重复它 - 但我可以在我的本地主机上重复它！
请注意此回答无效，因为插件已经更新。

【解决方案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);
            });

【讨论】：

在 3 年内：D gj 反正

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

以上方法都不适合我，我只是最终存储了最后点击项目的索引，并执行以下代码：

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

【讨论】：