web-dev-qa-db-ja.com

フクロウのカルーセルはクリックしたアイテムにスクロールします

シンプルなフクロウのカルーセルがあります。

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/

カルーセルを強制的にクリックしたアイテムまでスクロールするにはどうすればよいですか？

javascriptjquerywebowl-carousel
8
Mario
<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ページを送信します。自分で試してみてください。

6
Legendary

次のコードを試すことができます：

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
Konstantin.Z

上記のどれも私にはうまくいきませんでした、私は最後にクリックされたアイテムのインデックスを保存し、次のコードを実行することになりました：

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

これを試してください>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

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