Bootstrap Carousel，根据屏幕大小显示不同数量的项目 [英] Bootstrap Carousel that shows different number of items based on screen size

问题描述

我正在使用 Bootstrap的轮播来创建显示一堆信息的仪表板的 Highcharts 小部件。我已经成功实现了它，因此显示了1个图表，并使用了一些块逻辑来一次显示2个小部件。这一切都很好，但是我想增强一下功能：

I'm using Bootstrap's Carousel to create a dashboard that shows a bunch of Highcharts widgets. I've successfully implemented it so 1 chart shows up and used a bit of "chunking" logic to show 2 widgets at a time. This all works great, but I'd like to enhance things:

1. 如果用户的屏幕尺寸足以容纳2张图表，显示2个图表并按2进行分页。


2. 如果用户的小屏幕尺寸仅适合1个图表，则显示1并按1进行分页。


3. 如果用户的屏幕尺寸< 2向上，但大于1，显示1.5图表并按1进行分页。

我正在使用AngularJS构建HTML。在单独的模板块中执行＃1和＃2，然后根据屏幕尺寸进行显示/隐藏很容易。但是，我对＃3有点困惑。我不知道如何显示2个图表，而只能按1分页。

I'm using AngularJS to build the HTML. It's easy enough to do #1 and #2 in separate template blocks and then show/hide based on screen size. However, I'm a bit stumped on #3. I can't figure out how to display 2 charts, but only paginate by 1.

推荐答案

我最终编写了以下JavaScript去做这个。基本上，我要渲染两个不同的部分（带有.oneup和.twoup类），然后如果显示.oneup，则添加一个预览。

I ended up writing the following JavaScript to do this. Basically, I'm rendering two different sections (with classes .oneup and .twoup) and then adding a "preview" if .oneup is displayed.

<script type="text/javascript">
var chartBar = $('#chart-bar');

function chartPreview(firstChart) {
    var chartBarWidth = chartBar.width();
    if (chartBarWidth > 600) {
        var currentChart = $('.carousel-inner:visible .active');
        // append the next widget to the current item
        var chartToCheck = (firstChart) ? currentChart : currentChart.next();

        if (chartToCheck.next()) {
            chartToCheck.next().find('.widget').clone().appendTo(chartToCheck);
            $('.carousel-inner').css({'margin-left': '10px', 'width': '98.8%'})
        }
    } else if (chartBarWidth > 1040) {
        $('.carousel-inner').css({'margin-left': '0', 'width': '100%'})
    }
}
$(document).ready(function() {
    $('.widgets').sortable({
        cursor: "move",
        handle: ".heading"
    }).disableSelection();
    $('.boxes,.tasks').sortable();

    var carousel = $('.carousel');
    $(carousel).carousel({
        interval: 0
    });

    if (chartBar.width() < 1040) {
        chartBar.find('.oneup').show();
        chartPreview(true);

        carousel.bind('slide', function() {
            chartPreview(false);
        });
    } else {
        chartBar.find('.twoup').show();
    }
});

如果我不必同时渲染oneup和twoup，但是我不确定如何使用AngularJS进行渲染。这是我的单次ng-repeat：

It'd be nice if I didn't have to render both oneup and twoup, but I'm not sure how to do that with AngularJS. Here's my oneup ng-repeat:

<div class="carousel-inner">
    <div class="item chart"
         ng-repeat="widget in widgets | filter: {type: 'chart'} | orderBy: 'order'"
         ng-class="{active: $index == 0}">
        <chart class="widget" value="{{widget}}" type="{{widget.chartType}}"></chart>
    </div>
</div>

对比两次ng-repeat：

Versus the twoup ng-repeat:

<div class="carousel-inner">
    <div class="item chart"
         ng-repeat="widget in widgets | filter: {type: 'chart'} | chunk: 2 | orderBy: 'order'"
         ng-class="{active: $index == 0}">
        <chart class="widget" value="{{widget[0]}}" type="{{widget[0].chartType}}"></chart>
        <chart class="widget" value="{{widget[1]}}" type="{{widget[1].chartType}}"></chart>
    </div>
</div>

这篇关于Bootstrap Carousel，根据屏幕大小显示不同数量的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！