Bootstrap Carousel - 在不同分辨率下显示的项目数

Question

我想使用引导轮播以不同的屏幕分辨率显示不同数量的项目。

例如：

1. 我想在屏幕分辨率大于 1000 像素时显示 3 个联系人的详细信息

2. 我想在屏幕分辨率介于 600 像素和 999 像素之间时显示 2 个联系人的详细信息

3. 最后我想在屏幕分辨率小于600px时显示单个联系人的详细信息

提前感谢您的帮助。我已经坚持了几天了..

Answer 1

易于实施适用于 Bootstrap 4 的解决方案。将从“data-”中获取元素的数量，并从 JS 中获取断点。

(function ($) {
	function calcStepSize(optionNode) {
		var breakM = 990; 
		var breakS = 768; 
		
		var width = $(window).innerWidth();
		
		if(width < breakS) {
			var key = 's';
		} else if(width < breakM) {
			key = 'm';
		} else {
			key = 'l';
		}
		
		var cnt = 1*optionNode.data("itemcount-"+key);
		
		return cnt > 0? cnt : 1;
	}

	function repartition(container, items, count) {
		container.children().remove();
		
		for(var i = 0; i < items.length; i++) {
			var cBlock = $('<div class="carousel-item" ></div').appendTo(container);
			var cInnerBlock = $('<div class="row"></div>').appendTo(cBlock);
                
			for(var j = 0; j < count; j++) {
				var cIdx = (i + j) % items.length;
				
				cInnerBlock.append($(items.get(cIdx)).clone());
			}
		}
		
		container.children().first().addClass("active");
	}
	
	$('.carousel.multi').each(function(idx, El) {
		var carousel = $(El);
		var container = carousel.find('.carousel-inner');
		
		if(!container.children().first().hasClass('carousel-item')) {
			var items = container.children().clone();

			var lastSize = calcStepSize(carousel);
			repartition(container, items, lastSize);

			$(window).resize(function () {
				var cSize = calcStepSize(carousel);

				if(cSize != lastSize) {
					repartition(container, items, cSize);
					lastSize = cSize;
				}
			}); 
		} else {
			container.children().first().addClass("active");
		}
		
		carousel.carousel({
			interval: false
		});
	});

}(jQuery));

<link href="https://v4-alpha.getbootstrap.com/assets/css/docs.min.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/imsky/holder/master/holder.js"></script>

<div class="container">

<div class="bd-example">

<div id="carousel-example-generic" class="carousel multi slide" data-ride="carousel" data-itemcount-l="4" data-itemcount-m="3" data-itemcount-s="2" autostart="0">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
  
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#ccc:#755" class="img-fluid" alt="First slide">
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#7dd:#7dd" class="img-fluid" alt="Second slide">
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#747:#444" class="img-fluid" alt="Third slide">
    </div>
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#ccc:#755" class="img-fluid" alt="First slide">
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#7dd:#7dd" class="img-fluid" alt="Second slide">
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3">
      <img src="holder.js/250x250/auto/#747:#444" class="img-fluid" alt="Third slide">
    </div>
 
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

Answer 2

这是一个更简单的解决方案。添加一个特殊的 CSS 类（即：active-next）以与active 类相同的方式显示项目。当轮播更新活动幻灯片时，将类添加到下一个项目。然后使用媒体查询仅在较大宽度上应用特殊类。

演示：http://www.codeply.com/go/Q26U8fJDbx

CSS

@media (min-width: 768px) {
    .carousel-item.active-next {
        display: flex;
    }
}

jQuery

$('#mySlider').on('slide.bs.carousel', function (e) {
  var $e = $(e.relatedTarget);
  $e.removeClass('active-next');

  var $next = $e.next();
  if ($next.length===0){
      $next = $('.carousel-item').eq(0);
  }
  var $nextnext = $e.next().next();
  if ($nextnext.length===0){
      $nextnext = $('.carousel-item').eq(1);
  }
  $next.addClass('active-next');
  $nextnext.addClass('active-next');
});

Demo Bootstrap 4

Answer 3

使用hidden-sm 和hidden-md 类。

Answer 4

首先，我们需要item 类在轮播中显示项目，但是对于这种方法，我们不在DOM 中使用item 类，而是在窗口加载后基于屏幕分辨率创建它。非常适合我。根据我的要求，我不能少于 768 像素，因此您可以根据您的要求进行更新。

注意：仅适用于页面加载，不适用于调整窗口大小。

JS

  var itemscounttovisible = 1;
    var w = window.innerWidth;  
    console.log(w)     ;
    if (w > 768 && w <= 980)
        itemscounttovisible = 4;
    if (w > 980)
        itemscounttovisible = 5;
    if (w == 768)
        itemscounttovisible = 3;
    if (w < 768)
        itemscounttovisible = 2;
    $('.carousel ').each(function (index, Obj) {
        id = $(Obj).attr('id')
        myArray = $('#' + id + ' >.carousel-inner >a');
        for (var q = 0; q < myArray.length;) {
            var ElementsToBeWrapeed = myArray.slice(q, q + itemscounttovisible);
            if (q == 0)
                // first slide must be active
                $(ElementsToBeWrapeed).wrapAll("<div class='item active'></div>");
            else
                $(ElementsToBeWrapeed).wrapAll("<div class='item '></div>");
            q = q + itemscounttovisible;
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <div id="MenuID" class="carousel slide  carousel-fade " data-ride="carousel" data-type="multi" data-interval="0">
        <div class="carousel-inner">           
            <a href="#">contact  1</a>
            <a href="#">contact  2</a>
            <a href="#">contact  3</a>
            <a href="#">contact  4</a>
            <a href="#">contact  5</a>          
        </div>
        <a data-slide="prev" role="button" href="#MenuID" class="left carousel-control"><span class=" fa fa-angle-left"></span></a>
        <a data-slide="next" role="button" href="#MenuID" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
    </div>

更新：

我为每个内部项目使用了a 标签，并在 JS 中使用了相同的标签，您可以使用任何您想要的元素（跨度、div 等），但不要忘记在行中使用相同的 myArray = $('#' + id + ' >.carousel-inner >a'); 代替a.