Slick Slider Center Mode funktioniert nicht

Question

Ich verwende den Center Mode vom Slick Slider. Jetzt habe ich das Problem, dass ich den Schieberegler in voller Breite möchte und dass das zentrierte Bild viel größer ist als die Folien. Ich habe ein Bild von der Vorlage:

Slider Template

Meine Website ist Gastgeber auf: http://be-virtual.org/schnittchen/

My-Code ist der folgende Javascript:

 $(document).on('ready', function() { 
 

 
     
 
$('.center').slick({ 
 
    centerMode: true, 
 
    centerPadding: '60px', 
 
    slidesToShow: 3, 
 
    responsive: [ 
 
    { 
 
     breakpoint: 768, 
 
     settings: { 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '40px', 
 
     slidesToShow: 3 
 
     } 
 
    }, 
 
    { 
 
     breakpoint: 480, 
 
     settings: { 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '40px', 
 
     slidesToShow: 1 
 
     } 
 
    } 
 
    ] 
 
}); 
 
    
 

 
    });

.slick-center .slide-h3{ 
 
    color: #FFF; 
 
    } 
 
    .slider{ 
 
    width: 600px; 
 
    height:150px; 
 
    margin: 20px auto;  
 
    text-align: center; 
 
    } 
 

 
.slider button { 
 
    background: #000; 
 
} 
 

 
.slider button:hover button:active button:visited { 
 
    background: #000; 
 
} 
 

 
    .slide-h3{ 
 
    margin: 10% 0 10% 0; 
 
    padding: 40% 20%; 
 
    background: #008ed6; 
 
    } 
 
    .slider div{ 
 
    margin-right: 5px; 
 
    } 
 
    .slick-slide{ 
 
    opacity: .6; 
 
    } 
 
    .slick-center{ 
 
    display: block; 
 
    max-width: 10% !important; 
 
    max-height:20% !important; 
 
    opacity: 1; 
 

 

 
    }

<section class="center slider"> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=1"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=2"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=3"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=4"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=5"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=6"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=7"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=8"> 
 
    </div> 
 
    <div> 
 
     <img src="http://placehold.it/350x300?text=9"> 
 
    </div>

Entschuldigung iam neu bei der Codierung und neu in diesem Gemeinschaft. Bitte haben Sie etwas Geduld und Nachsicht.

Answer 1

Ihre Slick min js Upgrade-Datei für den Anfang http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js

Answer 2

Nun neueste Version benutzen, um Ihre jquery Setup ist falsch. Es sollte mit $(document).ready(function(){ und nicht $(document).on('ready', function() { beginnen. In deinem CSS sieht es so aus, als hättest du eine width auf die Diashow gesetzt, aber nicht auf die Bilder selbst, ist das korrekt? Versuchen Sie in diesem Fall, die Bilder auf dieselbe feste width als Ihre Diashow einzustellen.