carouFredSel.jsによる応答全幅カルーセル

Question

私は現在、私のサイトで全幅カルーセルを提供するためにcarouFredSel.jsを使用しています。このプラグインは、画面の左右端に前後の画像を部分的に表示する機能を備えているため、幅広い機能があるため、このプラグインを選択しました。

私もBootstrap 3を使用していますが、同じ動作を達成できなかったので、私はプラグインを使用することにしました。

私が経験している問題は、カルーセルを反応的にすることです。プラグインにはオプションに「responsive：true」を追加することで応答性を高めるオプションがありますが、そうするとレイアウトが壊れます。

プレースホルダ画像のコードは、http://jsfiddle.net/vUCZ8/にあります。あなたはそれを破壊し、完璧に動作していない見ることができるように

responsive: true // you must add this 

：私は、これは、このプラグインで応答を実装するための正しい方法であるhttp://jsfiddle.net/vUCZ8/embedded/result/

#intro { 
      width: 580px; 
      margin: 0 auto; 
     } 
     .wrapper { 
      background-color: white; 
      width: 480px; 
      margin: 40px auto; 
      padding: 50px; 
      box-shadow: 0 0 5px #999; 
     } 
     #carousel img { 
      display: block; 
      float: left; 
     } 
     .main-content ul { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
      display: block; 
     } 
     .main-content li { 
      display: block; 
      float: left; 
     } 
     .main-content li img { 
      margin: 0 20px 0 20px; 
     } 
     .list_carousel.responsive { 
      width: auto; 
      margin-left: 0; 
     } 
     .clearfix { 
      float: none; 
      clear: both; 
     } 
     .prev { 
      float: left; 
      margin-left: 10px; 
     } 
     .next { 
      float: right; 
      margin-right: 10px; 
     } 
     .pager { 
      float: left; 
      width: 300px; 
      text-align: center; 
     } 
     .pager a { 
      margin: 0 5px; 
      text-decoration: none; 
     } 
     .pager a.selected { 
      text-decoration: underline; 
     } 
     .timer { 
      background-color: #999; 
      height: 6px; 
      width: 0px; 
     } 

$(function() { 
    $('#carousel').carouFredSel({ 
     width: '100%', 
     items: { 
      visible: 3, 
      start: -1 
     }, 
     scroll: { 
      items: 1, 
      duration: 1000, 
      timeoutDuration: 3000 
     }, 
     prev: '#prev', 
     next: '#next', 
     pagination: { 
      container: '#pager', 
      deviation: 1 
     } 
    }); 
}); 

<div class="main-content"> 
    <ul id="carousel"> 
     <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
      <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
      <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
       <li><img src="http://coolcarousels.frebsite.nl/c/2/img/building6.jpg" /></li> 
    </ul> 
    <div class="clearfix"></div> 
</div> 

Answer 1

でフルスクリーンの結果を見てお勧めします。 http://jsfiddle.net/3mypa/ これはSTANDARDテンプレートにあります。

私はあなたが別のテンプレートを探していると思いますが、これはあなたが探しているものではありませんか？

http://coolcarousels.frebsite.nl/c/44/coolcarousel.html

Answer 2

私は、この問題を見てきたし、私が見つけた最高のは、ウィンドウのサイズを監視し、それに応じて反応させることです。例えば

$(window).resize(function(){ 
//listens for window resize 
    var TimeOutFunction; 
    clearTimeout(TimeOutFunction); 
    //To try and make sure this only fires after the window has stopped moving 
    TimeOutFunction=setTimeout(function(){ 
     $('.slides').trigger("destroy",true); 
     //Destroys the current carousel along with all it's settings - extreme but It wouldn't accept setting changes once running 
     if($(window).width()<1170){ 
      //The width should be the width of a single image since I assume your using the same image size for all images on the slider. 
      $(function(){ 
       $('#carousel').find('.slides').carouFredSel({ 
        width:'100%', 
        items:{ 
         visible:1, 
         start:-1 
        }, 
        responsive:true, 
        minimum:3 
       }) 
      }) 
     }else{ 
      $(function(){ 
       $('#carousel').find('.slides').carouFredSel({ 
        width:'100%', 
        items:{ 
         visible:3, 
         start:-1 
        }, 
        responsive:false, 
        minimum:3 
       }) 
      }) 
     } 
    },500) 
}) 

この方法では、一度ウィンドウサイズは、画像の幅とそれがないで蹴るべきで応答動作を下回っているが、それは再び、1枚のよりも大きな画像をだ後、それが戻って切り捨てビューに移動します。

確かにそれは移植性のためにもっと整えられるかもしれませんが、あなたには適切な基礎を与えるべきです。