Probleme mit Slick karussell centerMode - Growing center item

Question

Ich implementiere Ken Wheelers Glattkarussell und habe Probleme mit dem Styling des Center Items.

In der Demo für centreMode: Wahr auf seiner Website ist die mittlere Fliese größer als die anderen Fliesen.

Ich möchte es auch auf diese Weise implementieren, aber wenn ich benutzerdefinierte Styling auf das Center-Element anwenden, um seine Größe zu erhöhen, wird die Animation des Karussells sehr nervös und instabil.

Mein HTML sieht wie folgt aus:

<div class="main-carousel"> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-2.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-2.jpg").url" alt="logo" class="tile-image"> 
     </div> 
     <div class="tile-container"> 
      <img src="@routes.Assets.versioned("images/course_images/course-image-1.jpg").url" alt="logo" class="tile-image"> 
     </div> 
    </div> 

ich mit Bildern arbeite in divs conained. Hier ist meine CSS:

.slick-current img{ 
    width: 350px !important; 
    padding-top: 0px !important; 
} 

.tile-container img{ 
    width: 284px; 
} 

.tile-container img{ 
    padding-top: 20px ; 
} 

.tile-container{ 
    padding: 5px; 
} 

Und schließlich mein Slick Initiations Skript sieht wie folgt aus:

$('.main-carousel').slick({ 
    centerMode:true, 
    centerPadding: '80px', 
    slidesToShow: 4, 
    slidesToScroll: 1, 
    infinite: true, 
    variableWidth: true, 
    variableHeight: true 
}); 

Es sieht auch wie der centerPadding nicht angewandt werden - das ist, warum ich manuell bin Hinzufügen des Styling Die mittlere Kachel wachsen lassen.

Zusammenfassend: Das einzige Problem, das ich tatsächlich habe, ist, dass die Animation des Karussells nervös ist, wenn ich die Stile für das Wachsen der Mittelkachel anwende.

Ich benutze jQuery 3.1.1 sowie jquery-migrate. Alle erforderlichen Stile für das Karussell werden ebenfalls importiert.

jsfiddle: https://jsfiddle.net/b3cfooz5/

Answer 1

es gelöst. Ich benutzte

transform: scale(1.08); 

, um das mittlere Element nach oben zu skalieren, anstatt es mit Pixelbreite zu skalieren.

Hier ist zu hoffen, dass jemand in der Zukunft in das gleiche Problem läuft und diesen Thread findet.