Режим слайдера слайдера не работает

Question

Я использую режим центра с Slick Slider. Теперь у меня есть проблема, что я хочу ползунок в полной ширине и что центрированное изображение намного больше, чем слайды. Я добавил изображение из шаблона:

Slider Template

Мой сайт IST размещен на: http://be-virtual.org/schnittchen/

Мой код выглядит следующим образом 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>

К сожалению iam new при кодировании и новый в этом сообщества. Пожалуйста, имейте некоторое количество терпения и снисходительности в отношении .

Answer 1

обновить вашего Slick Миня файл использовать расслоение плотного последнюю версию http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js

Answer 2

Ну для начала ваших настроек JQuery неправильно. Он должен начинаться с $(document).ready(function(){, а не $(document).on('ready', function() {. В вашем CSS это похоже на то, что вы установили width в слайд-шоу, но не для самих изображений, верно? В этом случае попробуйте установить изображения на тот же фиксированный width в качестве слайд-шоу.