Javascript Owl转盘2垂直图像分页

我与猫头鹰旋转木马工作，并希望使垂直图像分页。我已经同步了需要显示图像的两个旋转木马。在OWLCarousel中仍然没有这样做的选项，我想知道您是否可以帮助我，因为我的jquery/javascript技能不太好。 这是密码

  jQuery(function($) {
  $(document).ready(function() {

    var sync1 = $(".owl-vertical-carousel");
    var sync2 = $(".owl-vertical-pagination");
    var count = $(".owl-vertical-pagination").find('img').length;

    var flag = false;

    var slides = sync1.owlCarousel({
      items:  1,
      nav:    false,
      dots:   false,
      animateOut: 'fadeOut',
    }).on('change.owl.carousel', function(e) {
          if (e.namespace && e.property.name === 'position' && !flag) {
              flag = true;  thumbs.to(e.relatedTarget.relative(e.property.value), 300, true);
              flag = false;
          }
    }).data('owl.carousel');


    var thumbs = sync2.owlCarousel({
       items: 10,
       dots:  false,
       slideSpeed: 300,
       animateOut: 'slideOutUp',
       animateIn: 'slideInUp',
       nav:       true,
       navText:   [
          "<i class='glyphicon glyphicon-menu-left'><</i>",
          "<i class='glyphicon glyphicon-menu-right'>></i>",
       ],
    })
    .on('click', '.item', function(e) {
          e.preventDefault();     
          sync1.trigger('to.owl.carousel', [$(e.target).parents('.owl-item').index(), 300, true]);
    })
    .on('change.owl.carousel', function(e) {
    }).data('owl.carousel');
  });
});

“项目”选项与导航箭头一样可以水平显示，因此即使图像垂直显示，也可以左右显示，拖动图像时可能会注意到这一点。 我需要一次只垂直显示4个项目，并隐藏其余项目。“下一步”和“上一步”的箭头也应起作用

---

谢谢

您可以试试这个演示。不是我创造的，只是为我找到答案，然后得到了这个

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#同步1.项目{
背景：#0c83e7；
填充：80px 0px；
保证金：5px；
颜色：#FFF；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
文本对齐：居中；
}
#同步2.项目{
背景：#C9C9C9；
填充：10px 0px；
保证金：5px；
颜色：#FFF；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
文本对齐：居中；
光标：指针；
}
#同步2.项目h1{
字号：18px；
}
#sync2.synced.item{
背景：#0c83e7；
}
var sync1=$（“#sync1”）；
var sync2=$（“#sync2”）；
sync1.1旋转木马({
单项：对，
幻灯片速度：1000，
导航：对，
分页：false，
后遗症：同步定位，
响应速度：200，
});
sync2.1旋转木马({
项目：15，
itemsDesktop:[1199,10]，
itemsDesktopSmall:[979,10]，
itemsTablet:[768,8]，
itemsMobile:[479,4]，
分页：false，
响应速度：100，
afterInit：函数（el）{
el.find（“.owl项”）.eq（0）.addClass（“已同步”）；
}
});
功能同步位置（el）{
var current=此.currentItem；
$（“同步2”）
.find（“.owl项”）
.removeClass（“已同步”）
.eq（电流）
.addClass（“已同步”）
if（$（“#sync2”）.data（“owlCarousel”）！==未定义）{
中心（当前）
}
}
$（“#sync2”）。在函数（e）中的（“单击”，“.owl项”{
e、 预防默认值（）；
变量编号=$（此）.data（“owleItem”）；
同步1.触发器（“owl.goTo”，编号）；
});
功能中心（编号）{
var sync2visible=sync2.data（“owlCarousel”）.owl.visibleItems；
var num=数字；
var=false；
用于（sync2visible中的var i）{
如果（num==sync2visible[i]）{
var发现=真；
}
}
如果（找到===false）{
如果（num>sync2visible[sync2visible.length-1]）{
sync2.trigger（“owl.goTo”，num-sync2visible.length+2）
}否则{
如果（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]）{
同步2.触发器（“owl.goTo”，num-1）
}
}

您可以尝试此演示。不是我创造的，只是为我找到答案，然后得到了这个

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#同步1.项目{
背景：#0c83e7；
填充：80px 0px；
保证金：5px；
颜色：#FFF；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
文本对齐：居中；
}
#同步2.项目{
背景：#C9C9C9；
填充：10px 0px；
保证金：5px；
颜色：#FFF；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
文本对齐：居中；
光标：指针；
}
#同步2.项目h1{
字号：18px；
}
#sync2.synced.item{
背景：#0c83e7；
}
var sync1=$（“#sync1”）；
var sync2=$（“#sync2”）；
sync1.1旋转木马({
单项：对，
幻灯片速度：1000，
导航：对，
分页：false，
后遗症：同步定位，
响应速度：200，
});
sync2.1旋转木马({
项目：15，
itemsDesktop:[1199,10]，
itemsDesktopSmall:[979,10]，
itemsTablet:[768,8]，
itemsMobile:[479,4]，
分页：false，
响应速度：100，
afterInit：函数（el）{
el.find（“.owl项”）.eq（0）.addClass（“已同步”）；
}
});
功能同步位置（el）{
var current=此.currentItem；
$（“同步2”）
.find（“.owl项”）
.removeClass（“已同步”）
.eq（电流）
.addClass（“已同步”）
if（$（“#sync2”）.data（“owlCarousel”）！==未定义）{
中心（当前）
}
}
$（“#sync2”）。在函数（e）中的（“单击”，“.owl项”{
e、 预防默认值（）；
变量编号=$（此）.data（“owleItem”）；
同步1.触发器（“owl.goTo”，编号）；
});
功能中心（编号）{
var sync2visible=sync2.data（“owlCarousel”）.owl.visibleItems；
var num=数字；
var=false；
用于（sync2visible中的var i）{
如果（num==sync2visible[i]）{
var发现=真；
}
}
如果（找到===false）{
如果（num>sync2visible[sync2visible.length-1]）{
sync2.trigger（“owl.goTo”，num-sync2visible.length+2）
}否则{
如果（num-1==-1）{
num=0；
}
sync2.trigger（“owl.goTo”，num）；
}
}else if（num
<div class="fw-col-xs-12 fw-col-sm-4">
    <div id="" class="owl-vertical-pagination owl-theme">
        <?php $count = count($atts['owl_vertical_carousel']);?>
        <?php for($i = 0; $i < $count; $i++) { ?>
             <div class="item dragMe">
                <img clas="" src="<?php echo $atts['owl_vertical_carousel'][$i]['url']; ?>">
            </div>
        <?php } ?>
    </div>
</div>

<div class="fw-col-xs-12 fw-col-sm-8">
    <div id="" class="owl-vertical-carousel owl-theme">
        <?php $count = count($atts['owl_vertical_carousel']);?>
        <?php for($i = 0; $i < $count; $i++) { ?>
             <div class="item">
                <img src="<?php echo $atts['owl_vertical_carousel'][$i]['url']; ?>">
            </div>
        <?php } ?>
    </div>
</div>

.owl-vertical-carousel .item img {
    width: 100%;
    height: auto;
}

.owl-vertical-pagination .owl-stage-outer .owl-stage {
    margin: 0 auto;
}

.owl-vertical-pagination .owl-item {
    width: 100% !important;
    margin: 10px;
}

.owl-vertical-pagination .item img {
    cursor: pointer;
}

.owl-theme .owl-nav .owl-prev {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.owl-theme .owl-nav .owl-next {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

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

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

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

  sync2.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 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)
    }

  }