logo标签列表

猫头鹰走马灯多行显示

javascriptjqueryhtmlcssowl-carousel
5

我想展示多行内容，并使用猫头鹰小圆点（owl dots）来实现，如下所示：

在此输入图片描述

但似乎没有内置选项可以实现这种效果。因此，我尝试了以下方法：

.owl-item {
width: 20%;
}

所以它将在一行中显示5个项目，但根本不起作用。我认为插件的样式将被应用。

这是示例链接：https://jsfiddle.net/7mt5aL2x/

有解决方案吗？

我认为Owl没有这个功能，但是Slick Slider有这个功能。https://dev59.com/XmEh5IYBdhLWcg3wVCEb - Akhil Aravind
谢谢。我会尝试的。 - Janath
不！这是可能的，只需创建网格并将它们放置在 Owl Carousel 的“item”类中即可。 - Awais
4个回答
17

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

所以我自己实现了它，并且认为它仍然可以帮助你或将来的其他人，所以我设置了一个codepen: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

2
这绝对应该被视为正确答案。它提供了所需的功能，同时还保持了与之相应的响应选项。 - RMH
1
为了更好的响应性能，需要更好的反应。 - FilT
谢谢！对我的应用程序非常有效。我很感激你的贡献。 - user2755541
谢谢！对我的应用程序非常有效。我很感激你的贡献。 - undefined
7

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

1
非常感谢。你救了我的一天。 - Čamo
1
运行得非常好！谢谢。 - FilT
我遇到了一个问题。我使用了 <html dir="rtl">，但是轮播图不起作用。我的意思是轮播图没有显示出来。 - Mohadeseh
@Mohadeseh 请尝试此解决方案 https://dev59.com/7Jnga4cB1Zd3GeqPeNRq - Awais
谢谢@Awais。但我有另一个问题。我问了这个链接：https://stackoverflow.com/questions/70752128/how-to-owl-carousel-multiple-rows - Mohadeseh
5
你可以在一个项目中添加多个对象，并适应 CSS 使它们更长：
<div class="owl-carousel owl-theme">
  <div class="item"><h4>1</h4><h4>2</h4></div>
  <div class="item"><h4>3</h4><h4>4</h4></div>
  <div class="item"><h4>5</h4><h4>6</h4></div>
  <div class="item"><h4>7</h4><h4>8</h4></div>
  <div class="item"><h4>9</h4><h4>10</h4></div>
</div>

https://jsfiddle.net/yL8q6p3c/

+1！我不知道为什么有人不会简单地做这个例子。滑块是用于指定所需幻灯片数量的。只需将多个项目放置在一个幻灯片中即可！ - Tolly
1
只要您创建了网格并将其放置在“video-item”中，就应该没问题。
这是我制作2行视频轮播的方法。
<div class="video-carousel-container container">
<div class="row slider-carousel-video owl-carousel">
  @foreach ($videos as $item)
    <div class="video-item col-lg-4 col-md-4 col-xs-1"> 
      <iframe width="320" height="185" src="https://www.youtube.com/embed/{{$item->video}}" frameborder="0" 
      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
      </iframe>
      <iframe width="320" height="185" src="https://www.youtube.com/embed/{{$item->video}}" frameborder="0" 
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
    </div>
  @endforeach
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接