猫头鹰轮播 2 垂直图像分页

Owl carousel 2 vertical image pagination

本文关键字：图像分页垂直猫头鹰更新时间：2023-09-26

我正在使用猫头鹰轮播，想进行垂直图像分页。我已经同步了需要显示图像的两个轮播。猫头鹰旋转木马中仍然没有选择这样做，我想知道您是否可以帮助我，因为我的 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');
  });
});

我用 php 循环图像，但示例猫头鹰轮播图像也可以这样做。

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

还有我的 CSS

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

项目选项和导航箭头水平工作，因此即使图像垂直显示，它仍然适用于左右，正如您在拖动图像时可能会注意到的那样。我一次只需要垂直显示 4 个项目，其余部分隐藏。下一个和上一个的箭头也应该有效。

谢谢

你可以

试试这个演示。不是我创造的，只是为我找到答案并得到了这个

https://codepen.io/anon/pen/yjLoKy

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