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