Caroufredsel自定义分页文本

时间：2015-06-05 16:39:51

标签： javascript html pagination caroufredsel

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

我需要幻灯片的总数，例如＆＃34; 10＆＃34;也是动态创建的，所以这个文本不是静态的。我认为所有这些都需要是动态的，例如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>

1 个答案:

答案 0 :(得分：0)

好吧，我通过使用这段代码来解决这个问题：

我正在使用javascript查找.length并将其注入.carouselTotal类。我也根据屏幕尺寸设置显示总数。我希望这能帮助其他人处于同样的境地。

    <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>
相关问题
最新问题