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

Posted 2023-05-07

【中文标题】猫头鹰轮播2垂直图片分页

【英文标题】：Owl carousel 2 vertical image pagination

【发布时间】：2016-05-06 05:40:17

【问题描述】：

我正在使用 owl carousel 并想做一个垂直图像分页。我已经同步了需要显示图像的两个轮播。在 owl carousel 中仍然没有这样做的选项，我想知道您是否可以帮助我，因为我的 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 个项目，然后隐藏其余项目。下一个和上一个的箭头也应该可以工作。

谢谢

【参考方案1】：

你可以试试这个演示。不是由我创建的，只是为我找到答案并得到了这个

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)