1. 首頁
  2. 問答
  3. Caroufredsel自定義分頁文本

Caroufredsel自定義分頁文本

2015-06-05 44 views
0

我正在使用Caroufredsel插件，我試圖根據屏幕大小獲得分頁動態。這應該相當簡單，但我覺得我可能會過度思考這一點。分頁文本只對大中型屏幕可見，所以中等到大屏幕文本應該是<p><strong>Showing 4</strong> out of 10</p>，對於較小的屏幕當可見時將是<p><strong>Showing 3</strong> out of 10</p>我不希望分頁增加滾動時，所以我認爲這就是爲什麼我的代碼是錯誤的。任何幫助將不勝感激。Caroufredsel自定義分頁文本

我需要幻燈片的總數，例如「10」以便動態創建，所以此文本不是靜態的。我認爲所有這些都需要動態，例如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>

來源

2015-06-05 user2025730

回答

0

好吧，我想通了這一點，通過使用此代碼：

我使用JavaScript找到。長度和其注入.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>

來源

2015-06-18 15:20:31 user2025730

相關問題

 相關問題