Slick Karussell - Display Karussell in einer Box div

Question

Ich benutze slick carousel und ich denke, es ist eine wirklich nette Bibliothek.

Allerdings habe ich ein Problem mit den Vorlagen, die ich erreichen muss.

Grundsätzlich brauche ich das glatte Karussell, um teilweise nächste und vorherige Dias anzuzeigen (was kann getan werden, einige Eigenschaft hinzufügen, wenn Slick initialisiert wird), aber das Problem ist, dass ich mein Karussell mit bestimmten Abmessungen haben muss.

Also, das Karussell muss in einem Boxed div von 1200px platziert werden (die Hauptfolie muss 1200 Breite und behalten Sie die Höhe als auto, so dass ich nicht verformen) und die Teildias auf die verlängert werden Rand des Bildschirms.

Hier ist ein kurzes Beispiel auf Code Stift (2 Ansätze, so überprüfen Sie die Kommentare, sie beide zu sehen): https://codepen.io/nickimola/pen/xrRraW

Markup:

html

<div class="carousel-container"> 
    <img src="https://unsplash.it/960/442/?image=0" /> 
    <img src="https://unsplash.it/960/442/?image=10" /> 
    <img src="https://unsplash.it/960/442/?image=11" /> 
</div> 

Weniger css

.carousel-container { 
    width: 100%; 
    margin: 0 auto; 
    height: 442px; 
    img { 
    max-width:1200px; 
    } 
} 

Coffee

$(document).ready -> 
    $('.carousel-container').slick({ 
    infinite: true, 
    centerPadding: '60px', 
    slidesToShow: 1, 
    slidesToScroll: 3, 
    centerMode: true, 
    autoplay: true, 
    autoplaySpeed: 5000 
    }) 

Offensichtlich ist die Lösung sauber zu sein und nichts Hacky braucht (ändern Bibliotheksdateien ist nicht eine Lösung.

Ich benutze auch Bootstrap, wenn es ein wenig helfen kann.

Vielen Dank für jede Hilfe oder einen Vorschlag

Answer 1

Ok Jungs, ich glaube, ich es.

Hier ist der aktualisierte Code:

HTML

<div class="carousel-container"> 
    <img src="https://unsplash.it/1200/442/?image=0" /> 
    <img src="https://unsplash.it/1200/442/?image=10" /> 
    <img src="https://unsplash.it/1200/442/?image=11" /> 
</div> 

WENIGER

img{ 
    max-width:1200px; 
    width:1200px; 
} 

.slick-slide{ 
    opacity: 0.6; 
    &.slick-current{ 
     opacity: 1; 
    } 
} 

Coffee

$(document).ready -> 
    $('.carousel-container').slick({ 
    infinite: true, 
    centerPadding: '60px', 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    centerMode: true, 
    autoplay: true, 
    autoplaySpeed: 5000, 
    variableWidth: true // This one did the trick! 
    }) 

So stellte sich heraus, dass, wenn ich Slick-Eigenschaften erlauben, eine variable Breite zu haben, kann die Breite korrekt mit CSS angegeben werden.

Wenn Sie jetzt das Beispiel überprüfen, können Sie sehen, was ich meine: https://codepen.io/nickimola/pen/xrRraW