猫头鹰旋转木马多排

Question

我只想显示多行和猫头鹰点。像这样。

但似乎没有内置选项。所以我试着给

.owl-item {
width: 20%;
}

所以它将排在 5 个项目中。但它根本不起作用。我认为插件样式将被应用。

这是小提琴。 https://jsfiddle.net/7mt5aL2x/

任何解决方案？

原文由 Janath 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一个简单的想法使用 flex

 $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    items:1,
    nav: true
})

 .owl-carousel .item {
    background: #4DC7A0;
    padding: 1rem;
}

body{
  padding: 10px;
}.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

<div class="owl-carousel owl-theme">
    <div class="item">
      <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

    </div>
    <div class="item">
      <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

    </div>
</div>

原文由 Awais 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

因为我需要一个 真正响应式的多行猫头鹰旋转木马（意味着它为所有窗口大小保持幻灯片排序），所以我在最初的搜索中偶然发现了这个问题，但没有找到真正有用或完整的答案。

所以我自己实现了它，并认为它仍然可以帮助你，或者将来的其他人，所以我设置了一个 代码笔：https: //codepen.io/Tolc/pen/OJXyKpo

它实现的基本上就是这种响应式轮播：

 desktop                   tablet                    mobile
cols: 3, rows: 2          cols: 2, rows: 3          cols: 1, rows: 2
1 2 3 -> 7 8 9            1 2 -> 7 8                1 -> 3 -> ...
4 5 6    10...            3 4    9 10               2    4
                          5 6    ...

这只是一个示例，该代码适用于 任意数量的列和行以及任意断点。

基本原理与其他答案相同：注入充当列的包装 div。但是我的实现处理了响应性，因此您不会失去 Owl Carousel 的任何功能。

Html 看起来像这样（唯一重要的部分是 data-slide-index 属性）：

 <div class="owl-carousel owl-theme">
    <div class="slide" data-slide-index="0">1</div>
    <div class="slide" data-slide-index="1">2</div>
    <div class="slide" data-slide-index="2">3</div>
    ...
</div>

整个js有点长但是就在这里（我试图评论有趣的部分）：

 $(document).ready(function() {
  var el = $('.owl-carousel');

  var carousel;
  var carouselOptions = {
    margin: 20,
    nav: true,
    dots: true,
    slideBy: 'page',
    responsive: {
      0: {
        items: 1,
        rows: 2 //custom option not used by Owl Carousel, but used by the algorithm below
      },
      768: {
        items: 2,
        rows: 3 //custom option not used by Owl Carousel, but used by the algorithm below
      },
      991: {
        items: 3,
        rows: 2 //custom option not used by Owl Carousel, but used by the algorithm below
      }
    }
  };

  //Taken from Owl Carousel so we calculate width the same way
  var viewport = function() {
    var width;
    if (carouselOptions.responsiveBaseElement && carouselOptions.responsiveBaseElement !== window) {
      width = $(carouselOptions.responsiveBaseElement).width();
    } else if (window.innerWidth) {
      width = window.innerWidth;
    } else if (document.documentElement && document.documentElement.clientWidth) {
      width = document.documentElement.clientWidth;
    } else {
      console.warn('Can not detect viewport width.');
    }
    return width;
  };

  var severalRows = false;
  var orderedBreakpoints = [];
  for (var breakpoint in carouselOptions.responsive) {
    if (carouselOptions.responsive[breakpoint].rows > 1) {
      severalRows = true;
    }
    orderedBreakpoints.push(parseInt(breakpoint));
  }

  //Custom logic is active if carousel is set up to have more than one row for some given window width
  if (severalRows) {
    orderedBreakpoints.sort(function (a, b) {
      return b - a;
    });
    var slides = el.find('[data-slide-index]');
    var slidesNb = slides.length;
    if (slidesNb > 0) {
      var rowsNb;
      var previousRowsNb = undefined;
      var colsNb;
      var previousColsNb = undefined;

      //Calculates number of rows and cols based on current window width
      var updateRowsColsNb = function () {
        var width =  viewport();
        for (var i = 0; i < orderedBreakpoints.length; i++) {
          var breakpoint = orderedBreakpoints[i];
          if (width >= breakpoint || i == (orderedBreakpoints.length - 1)) {
            var breakpointSettings = carouselOptions.responsive['' + breakpoint];
            rowsNb = breakpointSettings.rows;
            colsNb = breakpointSettings.items;
            break;
          }
        }
      };

      var updateCarousel = function () {
        updateRowsColsNb();

        //Carousel is recalculated if and only if a change in number of columns/rows is requested
        if (rowsNb != previousRowsNb || colsNb != previousColsNb) {
          var reInit = false;
          if (carousel) {
            //Destroy existing carousel if any, and set html markup back to its initial state
            carousel.trigger('destroy.owl.carousel');
            carousel = undefined;
            slides = el.find('[data-slide-index]').detach().appendTo(el);
            el.find('.fake-col-wrapper').remove();
            reInit = true;
          }

          //This is the only real 'smart' part of the algorithm

          //First calculate the number of needed columns for the whole carousel
          var perPage = rowsNb * colsNb;
          var pageIndex = Math.floor(slidesNb / perPage);
          var fakeColsNb = pageIndex * colsNb + (slidesNb >= (pageIndex * perPage + colsNb) ? colsNb : (slidesNb % colsNb));

          //Then populate with needed html markup
          var count = 0;
          for (var i = 0; i < fakeColsNb; i++) {
            //For each column, create a new wrapper div
            var fakeCol = $('<div class="fake-col-wrapper"></div>').appendTo(el);
            for (var j = 0; j < rowsNb; j++) {
              //For each row in said column, calculate which slide should be present
              var index = Math.floor(count / perPage) * perPage + (i % colsNb) + j * colsNb;
              if (index < slidesNb) {
                //If said slide exists, move it under wrapper div
                slides.filter('[data-slide-index=' + index + ']').detach().appendTo(fakeCol);
              }
              count++;
            }
          }
          //end of 'smart' part

          previousRowsNb = rowsNb;
          previousColsNb = colsNb;

          if (reInit) {
            //re-init carousel with new markup
            carousel = el.owlCarousel(carouselOptions);
          }
        }
      };

      //Trigger possible update when window size changes
      $(window).on('resize', updateCarousel);

      //We need to execute the algorithm once before first init in any case
      updateCarousel();
    }
  }

  //init
  carousel = el.owlCarousel(carouselOptions);
});

完整的 codepen 以查看它的实际效果：https: //codepen.io/Tolc/pen/OJXyKpo

原文由 Tolc 发布，翻译遵循 CC BY-SA 4.0 许可协议