Responsive Karussell in voller Breite mit carouFredSel.js

Question

Ich benutze derzeit carouFredSel.js, um ein Karussell voller Breite auf meiner Website zu dienen. Ich entschied mich für dieses Plugin wegen seiner Fähigkeiten mit voller Breite mit der Fähigkeit, die vorherigen und nächsten Bilder am linken und rechten Bildschirmrand teilweise anzuzeigen.

Ich benutze auch Bootstrap 3, aber war nicht erfolgreich das gleiche Verhalten zu erreichen, deshalb habe ich mich entschieden, mit einem Plugin zu gehen.

Das Problem, das ich erfahre, macht das Karussell ansprechend. Das Plugin hat eine Option, um es reaktionsfähig zu machen, indem man den Optionen 'responsive: true' hinzufügt, aber wenn ich das tue, bricht es das Layout.

Mein Code mit Platzhalterbildern finden Sie unter http://jsfiddle.net/vUCZ8/. Ich würde empfehlen, bei 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

im Vollbild Ergebnis der Suche Dies ist der richtige Weg mit diesem Plugin zu implementieren ansprechbar:

responsive: true // you must add this 

Wie Sie sehen können, ist es nicht zu brechen und gut funktionierend. http://jsfiddle.net/3mypa/ Dies ist mit der Vorlage STANDARD.

Ich glaube, Sie suchen nach einer anderen Vorlage, ist das nicht wonach Sie suchen?

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

Answer 2

Ich habe auch bei diesem Thema suchen und das Beste, was ich gefunden habe, ist für eine Fenstergröße zu sehen und entsprechend reagieren. Zum Beispiel

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

Auf diese Weise, wenn die Fenstergröße ist unter der Breite der Bilder und die Antwortaktion sollte kick es tut, aber wenn es größer als ein Bild ist wieder bewegt er sich zurück in der abgeschnittenen Ansicht.

Zugegeben, es könnte mehr für Portabilities Sake aufgeräumt werden, aber Sie sollten Ihnen die richtige Basis geben, um zu arbeiten.