Caroufredsel Custom Pagination text

Question

I am working with the Caroufredsel Plugin and I am trying to get the pagination to be dynamic based on screen size. It should be fairly simple but I feel I may be over thinking this. The pagination text is only visible for medium and large screens so medium to large screens the text should be <p><strong>Showing 4</strong> out of 10</p> and for smaller screens when visible would be <p><strong>Showing 3</strong> out of 10</p> I do not want the pagination to increase when scrolled so I think that is why my code is wrong. Any help would be greatly appreciated.

I need the total number of slides eg "10" to be created dynamically as well so this text is not static. I think all of this needs to be dynamic eg onCreate possibly with onAfter and onBefore. I am not sure at this point.

Here is my code currently. If you need the css please let me know.

<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

Alright I figured this out by using this code:

I am using javascript to find the .length and injecting it into the .carouselTotal class. I am also setting the showing total based on screen size. I hope this helps others in the same situation.

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