Caroufredsel Пользовательский текст разбиения на страницы

Question

Я работаю с плагином Caroufredsel, и я пытаюсь настроить динамическое разбиение на страницы на основе размера экрана. Это должно быть довольно просто, но я чувствую, что могу передумать. Текст с разбивкой на страницы доступен только для средних и больших экранов, поэтому от средних до больших экранов текст должен быть <p><strong>Showing 4</strong> out of 10</p>, а для меньших экранов, если видимым будет <p><strong>Showing 3</strong> out of 10</p>. Я не хочу, чтобы размер страницы увеличивался при прокрутке, поэтому я думаю, что именно поэтому мой код ошибочен , Любая помощь будет принята с благодарностью.

Мне нужно общее количество слайдов, например «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. Я также устанавливаю общее количество показов на основе размера экрана. Надеюсь, это поможет другим в той же ситуации.

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