Owl carousel 2 vertical image pagination

Question

I am working with owl carousel and would like to make a vertical image pagination. I already synced the two carousels that need to display the images. There's still no option in owl carousel for doing this and i was wondering if you might help me because my jquery/javascript skills are not too great. Here is the code

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

I loop the images with php, but the same can be done with the example owl carousel images.

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

And my 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);
}

The items option works horizontally, as well as the navigation arrows, so even if the images are displayed vertically it will still work for left and right, as you might notice if you drag the images. I need to show only 4 items vertically at a time, and hide the rest. The arrows for next and previous should also work.

Thanks

hasan challawala hasan challawala · Accepted Answer · 2018-04-18T12:28:51

you can try this demo. not created by me just finding answer for me and got this

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

  }

Owl carousel 2 vertical image pagination

1 Answers