Responsive full width carousel with carouFredSel.js

Question

Attualmente sto usando carouFredSel.js per servire una carosello a tutta larghezza sul mio sito. Ho scelto questo plug-in a causa delle sue capacità di larghezza completa con la possibilità di mostrare parzialmente le immagini precedenti e successive sui bordi sinistro e destro dello schermo.

Sto anche utilizzando Bootstrap 3, ma non è riuscito a ottenere lo stesso comportamento, quindi è per questo che ho scelto di utilizzare un plug-in.

Il problema che sto riscontrando è rendere il carosello reattivo. Il plugin ha un'opzione per renderlo reattivo aggiungendo 'responsive: true' alle opzioni, ma quando lo faccio, rompe il layout.

Il mio codice con immagini segnaposto è disponibile al numero http://jsfiddle.net/vUCZ8/. Vorrei raccomandare guardando il risultato pieno schermo a 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

questo è il modo corretto per implementare reattivo con questo plugin:

responsive: true // you must add this 

Come si può vedere che non sta rompendo e perfettamente funzionante. http://jsfiddle.net/3mypa/ Questo è con il modello STANDARD.

Credo che stai cercando un modello diverso, non è questo quello che stai cercando?

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

Answer 2

Ho cercato in questo problema come bene e il migliore che ho trovato è quello di guardare per una dimensione della finestra e reagire di conseguenza. Per esempio

$(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) 
}) 

In questo modo una volta che la dimensione della finestra è inferiore alla larghezza delle immagini e l'azione reattiva deve calciare in che fa, ma una volta che è ancora più grande di una sola immagine si muove di nuovo alla vista troncato.

Certo, si può riordinare di più per il gusto della portabilità ma voi che dovreste darvi la base giusta su cui lavorare.