Caroufredsel 自定义分页文本

Question

我正在使用 Caroufredsel 插件，我试图让分页根据屏幕尺寸动态显示。它应该相当简单，但我觉得我可能想多了。分页文本仅在中型和大型屏幕上可见，因此中型到大型屏幕的文本应为 Showing 4 out of 10，对于可见的小屏幕，文本应为 Showing 3 out of 10 我不希望滚动时分页增加，所以我认为这就是我的代码错误的原因。任何帮助将不胜感激。

我还需要动态创建幻灯片的总数，例如“10”，因此此文本不是静态的。我认为所有这些都需要是动态的，例如 onCreate 可能与 onAfter 和 onBefore。我现在不确定。

这是我目前的代码。如果您需要 css 请告诉我。

<script type="text/javascript">
$(document).ready(function(){
    $('#myCarousel').carouFredSel(CarouselInit);
});

$(window).resize(function(){
    if($(window).width() < 575){
        CarouselInit.items = 2;
        $('#myCarousel').carouFredSel(CarouselInit);
    }
    else if($(window).width() < 900){
        CarouselInit.items = 3;
        $('#myCarousel').carouFredSel(CarouselInit);
    }else{
        CarouselInit.items = 4;
        $('#myCarousel').carouFredSel(CarouselInit);
    }
});

var CarouselInit = {
        circular: false,
        infinite: false,
        responsive: true,
        width: '100%',
        height: 'auto',
        auto: false,
        swipe: {
          onTouch: true,
          onMouse: true
        },
        items: 4,
        scroll: {
            items: 1,
            fx: 'scroll',
            onAfter : function( data ) { 
            $(this).trigger("currentPosition", function( pos ) {
                var txt = "<p><strong>Showing " + (pos+4) + " </strong>out of " + $("> *", this).length + ".</p>";
                $("#carousel-index").html( txt );
            });
        }
        },
        prev: '#prev',
        next: '#next',
};

</script>

<!-- BEGIN LEADERSHIP SLIDER -->

<div class="container leadershipSlider">
    <div class="row">
        <div class="col-sm-1 carouselControls hidden-xs">
            <a id="prev"><button type="go" title="Previous" class="btn btn-default btn-darkBlue"><i class="glyphicon glyphicon-menu-left carouselPrev"></i></button></a>
            <a id="next"><button type="go" title="Next" class="btn btn-default btn-darkBlue"><i class="glyphicon glyphicon-menu-right carouselNext"></i></button></a>
        </div>
    <div class="col-xs-12 col-sm-10">
        <div id="myCarousel" class="carousel slide Leadership" data-ride="carousel">
            <!-- Carousel items -->
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Jim</strong><br />Johnson <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Albert</strong><br />Einstein <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <!--/item-->

                        <!-- Carousel items -->
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Jim</strong><br />Johnson <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>
            <div class="item">
                <div class="leadershipCol"><a class="leadershipImg" href="#x"><img title="TMC Connect" src="images/tmcLeader1.png" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Albert</strong><br />Einstein <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                </div>
            </div>

            <!--/item-->
            </div>

            <!--/myCarousel-->
        </div>
        <div class="clearfix"></div>

        <div id="carousel-index" class="col-sm-3 col-sm-offset-1 hidden-xs" style="text-align: left;"><strong>Showing 4</strong> out of 10</div>
</div>
</div>

Answer 1

好的，我使用这段代码解决了这个问题：

我正在使用 javascript 找到 .length 并将其注入 .carouselTotal class。我还根据屏幕尺寸设置显示总数。我希望这对处于相同情况的其他人有所帮助。

    <script type="text/javascript">
$(document).ready(function(){
    $('#myCarousel').carouFredSel(CarouselInit);
    $('#carousel-index .carouselTotal').text($('#myCarousel > .item').length);
});


$(window).resize(function(){
    if($(window).width() < 575){
        CarouselInit.items = 2;
        $('#carousel-index .carouselCount').text('2');
        $('#myCarousel').carouFredSel(CarouselInit);
    }
    else if($(window).width() < 1080){
        CarouselInit.items = 3;
        $('#carousel-index .carouselCount').text('3');
        $('#myCarousel').carouFredSel(CarouselInit);
    }else{
        CarouselInit.items = 4;
        $('#carousel-index .carouselCount').text('4');
        $('#myCarousel').carouFredSel(CarouselInit);
    }
});

var CarouselInit = {
        circular: false,
        infinite: false,
        responsive: true,
        width: '100%',
        height: 'auto',
        auto: false,
        swipe: {
          onTouch: true,
          onMouse: true
        },
        items: {
            visible: 4,
            },
        scroll: {
            items: 1,
            fx: 'scroll',
},
        prev: '#prev',
        next: '#next',
};

</script>

Caroufredsel 自定义分页文本

Caroufredsel Custom Pagination text

html

javascript

pagination

caroufredsel