Ändern der festen Breite div mit Medienabfragen im flüssigen Layout

Question

Ich benutze FlexSlider, um mehrere 170px breite Logos in einem responsiven Design anzuzeigen. Derzeit füllt der Schieberegler 100% der Fluidbreite des enthaltenden Divs, das in dem gesamten Seitenwrapper enthalten ist, aber dies führt häufig zu halb abgeschnittenen Bildern. Ich möchte stattdessen, dass der Schieberegler in festen Breiten skaliert wird, so dass die Logos angezeigt werden, ohne abgeschnitten zu werden. Die Desktop-Größe würde 5 Logos, 4 Tabletts usw. anzeigen. Die Medienabfragen scheinen jedoch nicht alle zu beeinflussen , so bleibt mir nur die ursprüngliche Breite (850px), die schnell zu groß für die Bildschirmgröße wird. Gibt es etwas, das mir fehlt? Ist es möglich, flüssiges CSS mit einem Element fester Breite wie diesem zu mischen?

Slider Struktur:

<div class="contentwrap"> 

[Omitted rest of the page content] 

<div class="sliderwrap"> 
<div class="flexslider carousel"> 
<ul class="slides"> 
<li>Content</li> 
<li>Content</li> 
<li>Content</li> 
<li>Content</li> 
<li>Content</li> 
</ul> 
</div> 
</div> 
</div> 

CSS:

.contentwrap { 
width: 85.5%; 
margin: 0 auto;} 

.sliderwrap { 
width: 850px; 
margin: 0 auto;} 

@media screen and (max-width: 659px) { 
.contentwrap { 
width: 100%; 
} 

@media screen and (max-width: 169px) { 
.sliderwrap { 
display: none; 
} 

@media screen and (min-width: 170px) and (max-width: 339px) { 
.sliderwrap { 
width: 170px; 
} 


@media screen and (min-width: 340px) and (max-width: 509px) { 
.sliderwrap { 
width: 340px; 
} 

@media screen and (min-width: 510px) and (max-width: 794px) { 
.sliderwrap { 
width: 510px; 
} 

@media screen and (min-width: 795px) and (max-width: 995px) { 
.sliderwrap { 
width: 680px; 
} 

@media screen and (min-width: 170px) { 
.sliderwrap { 
width: 850px; 
} 

Answer 1

müssen Sie Carousel With Min & Max Ranges Beispiel verwenden - http://jsfiddle.net/Luu3c2wk/

Code:

jQuery(document).ready(function($) { 

    // store the slider in a local variable 
    var $window = $(window), 
    flexslider; 

    // tiny helper function to add breakpoints 
    function getGridSize() { 
     return (window.innerWidth < 340) ? 1 : 
      (window.innerWidth < 510) ? 2 : 
      (window.innerWidth < 800) ? 3 : 
      (window.innerWidth < 995) ? 4 : 5; 
    } 

    $('.flexslider').flexslider({ 
     selector: ".slides > div.flex-col", 
     animation: "slide", 
     animationLoop: false, 
     itemWidth: 100, 
     itemMargin: 0, 
     minItems: getGridSize(), // use function to pull in initial value 
     maxItems: getGridSize(), // use function to pull in initial value 
     start: function(slider){ 
      flexslider = slider; 
     } 
    }); 

    // check grid size on resize event 
    $window.on('resize', function() { 
     var gridSize = getGridSize(); 

     console.log(gridSize); 

     flexslider.vars.minItems = gridSize; 
     flexslider.vars.maxItems = gridSize; 
    }); 

});