0

私は現在、Owl Carousel プラグインを使用して、以下のアドレスに示されているデモに従って複数の同期されたカルーセルを作成していますが、1 つのページに複数のカルーセルがあります。

http://owlgraphic.com/owlcarousel/demos/sync.html

カルーセルを正常に複製し、さまざまな数の小さなアイテムを操作する際の特定の問題とは別に、カルーセルを独立して機能させることができました。一番上のカルーセルに一番下のカルーセルよりも多くのアイテムを作成し、一番下のカルーセルの表示アイテムの外側にある小さなアイテムを選択すると、両方の小さなアイテムのカルーセルが移動してそのアイテムを表示します (一番上のカルーセルでは選択されていません)。

つまり、次のコードでは、上部のカルーセルから「20」を選択し、下部のカルーセルの小さなアイテム カルーセルが右に移動してアイテム 20 を表示するのを確認します。次に、上部の小さなアイテム カルーセルのアイテム 3 を選択して、下部の小さなアイテムを確認します。カルーセルシフトバック。奇妙なことに、一番下のカルーセルの jQuery パラメータ内で項目数を増やしても、一番上のカルーセルにはまったく影響しません。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<script>
$(document).ready(function() {

  var sync1 = $("#sync1");
  var sync2 = $("#sync2");

  sync1.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition,
    responsiveRefreshRate : 200,
  });

  sync2.owlCarousel({
    items : 20,
    itemsDesktop      : [1199,10],
    itemsDesktopSmall     : [979,10],
    itemsTablet       : [768,8],
    itemsMobile       : [479,4],
    pagination:false,
    responsiveRefreshRate : 100,
    afterInit : function(el){
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });

  function syncPosition(el){
    var current = this.currentItem;
    $("#sync2")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#sync2").data("owlCarousel") !== undefined){
      center(current)
    }
  }

  $("#sync2").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    sync1.trigger("owl.goTo",number);
  });

  function center(number){
    var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
    var num = number;
    var found = false;
    for(var i in sync2visible){
      if(num === sync2visible[i]){
        var found = true;
      }
    }

    if(found===false){
      if(num>sync2visible[sync2visible.length-1]){
        sync2.trigger("owl.goTo", num - sync2visible.length+2)
      }else{
        if(num - 1 === -1){
          num = 0;
        }
        sync2.trigger("owl.goTo", num);
      }
    } else if(num === sync2visible[sync2visible.length-1]){
      sync2.trigger("owl.goTo", sync2visible[1])
    } else if(num === sync2visible[0]){
      sync2.trigger("owl.goTo", num-1)
    }

  }


  /* carousel two */
  var sync3 = $("#sync3");
  var sync4 = $("#sync4");

  sync3.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition2,
    responsiveRefreshRate : 200,
  });

  sync4.owlCarousel({
    items : 15,
    itemsDesktop      : [1199,10],
    itemsDesktopSmall     : [979,10],
    itemsTablet       : [768,8],
    itemsMobile       : [479,4],
    pagination:false,
    responsiveRefreshRate : 100,
    afterInit : function(el){
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });

  function syncPosition2(el){
    var current = this.currentItem;
    $("#sync4")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#sync4").data("owlCarousel") !== undefined){
      center(current)
    }
  }

  $("#sync4").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    sync3.trigger("owl.goTo",number);
  });

  function center(number){
    var sync4visible = sync4.data("owlCarousel").owl.visibleItems;
    var num = number;
    var found = false;
    for(var i in sync4visible){
      if(num === sync4visible[i]){
        var found = true;
      }
    }

    if(found===false){
      if(num>sync4visible[sync4visible.length-1]){
        sync4.trigger("owl.goTo", num - sync4visible.length+2)
      }else{
        if(num - 1 === -1){
          num = 0;
        }
        sync4.trigger("owl.goTo", num);
      }
    } else if(num === sync4visible[sync4visible.length-1]){
      sync4.trigger("owl.goTo", sync4visible[1])
    } else if(num === sync4visible[0]){
      sync4.trigger("owl.goTo", num-1)
    }

  }

});
</script>
<link rel="stylesheet" type="text/css" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<style>
#sync1 .item{
    background: #0c83e7;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#sync2 .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
#sync2 .item h1{
  font-size: 18px;
}
#sync2 .synced .item{
  background: #0c83e7;
}



/*carousel 2 */
#sync3 .item{
    background: #0c83e7;
    padding: 80px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
#sync4 .item{
    background: #C9C9C9;
    padding: 10px 0px;
    margin: 5px;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}
#sync4 .item h1{
  font-size: 18px;
}
#sync4 .synced .item{
  background: #0c83e7;
}
</style>
<div id="sync1" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>
<div id="sync2" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>




<!-- carousel two -->
<div id="sync3" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>
<div id="sync4" class="owl-carousel">
  <div class="item"><h1>1</h1></div>
  <div class="item"><h1>2</h1></div>
  <div class="item"><h1>3</h1></div>
  <div class="item"><h1>4</h1></div>
  <div class="item"><h1>5</h1></div>
  <div class="item"><h1>6</h1></div>
  <div class="item"><h1>7</h1></div>
  <div class="item"><h1>8</h1></div>
  <div class="item"><h1>9</h1></div>
  <div class="item"><h1>10</h1></div>
  <div class="item"><h1>11</h1></div>
  <div class="item"><h1>12</h1></div>
  <div class="item"><h1>13</h1></div>
  <div class="item"><h1>14</h1></div>
  <div class="item"><h1>15</h1></div>
  <div class="item"><h1>16</h1></div>
  <div class="item"><h1>17</h1></div>
  <div class="item"><h1>18</h1></div>
  <div class="item"><h1>19</h1></div>
  <div class="item"><h1>20</h1></div>
  <div class="item"><h1>21</h1></div>
  <div class="item"><h1>22</h1></div>
  <div class="item"><h1>23</h1></div>
</div>

別の名前を割り当てる必要がある変数の場合だと確信していますが、何が問題なのかを突き止めることはできません。何かご意見は？

4

1 に答える 1

0

自分で調べてみると、スクリプトの 2 番目のコピーで "current"、"num"、"number" 変数の名前を変更する単純なケースでした。もっと意味のある名前を付けましょう!!

  /* carousel two */
  var sync3 = $("#sync3");
  var sync4 = $("#sync4");

  sync3.owlCarousel({
    singleItem : true,
    slideSpeed : 1000,
    navigation: true,
    pagination:false,
    afterAction : syncPosition2,
    responsiveRefreshRate : 200,
  });

  sync4.owlCarousel({
    items : 15,
    itemsDesktop      : [1199,10],
    itemsDesktopSmall     : [979,10],
    itemsTablet       : [768,8],
    itemsMobile       : [479,4],
    pagination:false,
    responsiveRefreshRate : 100,
    afterInit : function(el){
      el.find(".owl-item").eq(0).addClass("synced");
    }
  });

  function syncPosition2(el){
    var current2 = this.currentItem;
    $("#sync4")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current2)
      .addClass("synced")
    if($("#sync4").data("owlCarousel") !== undefined){
      center2(current2)
    }
  }

  $("#sync4").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number2 = $(this).data("owlItem");
    sync3.trigger("owl.goTo",number2);
  });

  function center2(number2){
    var sync4visible = sync4.data("owlCarousel").owl.visibleItems;
    var num2 = number2;
    var found = false;
    for(var i in sync4visible){
      if(num2 === sync4visible[i]){
        var found = true;
      }
    }

    if(found===false){
      if(num2>sync4visible[sync4visible.length-1]){
        sync4.trigger("owl.goTo", num2 - sync4visible.length+2)
      }else{
        if(num2 - 1 === -1){
          num2 = 0;
        }
        sync4.trigger("owl.goTo", num2);
      }
    } else if(num2 === sync4visible[sync4visible.length-1]){
      sync4.trigger("owl.goTo", sync4visible[1])
    } else if(num === sync4visible[0]){
      sync4.trigger("owl.goTo", num2-1)
    }

  }
于 2014-09-08T08:16:29.393 に答える