owl carousel scroll to clicked item

问题

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 force the carousel scroll to the clicked item?

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

There are was few trouble with version, and thats why i send you full html page - try it to yourself!

回答2:

You can try next 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);
            });

回答3:

Try this one>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

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

回答4:

None of the above worked for me , I just ended up storing the index of the last clicked item, and executing the following code :

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

Please note : My use case was a little bit different, I have multiple carousels stacked vertically. It would store index and the carousel id when an item was clicked. When the user navigated away and back to the original page, it would auto scroll to the correct carousel and carousel item.**

//Scroll to last selected carousel

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

来源：https://stackoverflow.com/questions/29748995/owl-carousel-scroll-to-clicked-item

标签

javascript

jquery

web

owl-carousel