Проблемы с реализацией Slick Carousel

Question

Новичка здесь ищут помощь. У меня возникли проблемы с реализацией карусели Slick на моем сайте. Я хотел бы использовать «слайдер» SYNCING найдено в http://kenwheeler.github.io/slick/

Пожалуйста, смотрите мой код здесь: http://jsfiddle.net/g1xd6vtx/

Сайт Я строю это C# .NET MVC4 проект построен в Visual Studio 2012.

Пример HTML:

<div class="slider slider-for"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 

<div class="slider slider-nav"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 

CSS (который я поместил в головной части):

<link rel="stylesheet" type="text/css" href="slick/slick.css"/> 

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<script type="text/javascript" src="slick/slick.min.js"></script> 

Javascript (который я поместил в разделе скриптов):

$('.slider-for').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    arrows: false, 
    fade: true, 
    asNavFor: '.slider-nav' 
}); 

$('.slider-nav').slick({ 
    slidesToShow: 3, 
    slidesToScroll: 1, 
    asNavFor: '.slider-for', 
    dots: true, 
    centerMode: true, 
    focusOnSelect: true 
}); 

Спасибо за любую помощь! :)

Answer 1

Немного поздно, но это может помочь другим: Я заметил, что вы должны иметь блок или встроенный блок внутри .slider-nav DIV. В этом случае я добавил H1. Затем нарисуйте его, чтобы покрыть родительский DIV, затем добавьте text-align: center; к родительскому DIV.

CSS

.slider-nav h1{ 
    display:inline-block; 
    width:100%; 
    height:80px; 
} 

.slider-nav .slick-slide{ 
    height:80px; 
    color:#fff; 
    background:green; 
    cursor:pointer; 
    text-align:center; 
    margin:0 10px; 
} 

HTML

<div class="slider-nav"> 
    <div><h1>1</h1></div> 
    <div><h1>2</h1></div> 
    <div><h1>3</h1></div> 
    <div><h1>4</h1></div> 
    <div><h1>5</h1></div> 
</div> 

Демо: http://jsfiddle.net/g1xd6vtx/2/