Slick Slider Следующие стрелки не отображаются

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

Вот мой код:

HTML

<div class="slider"> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100"> 
     </div> 
     <div> 
     <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100"> 
     </div> 
    </div>

CSS

body{ 
    background-color: #fff; 
    } 
    .slider{ 
    margin: 60px auto; 
    width: 500px; 
    } 
    div{ 
    height: 100%; 
    } 
    p{ 
    text-align: center; 
    font-size: 12px; 
    color: white; 
    }

JavaScript

$(document).ready(function(){ 
     $('.slider').slick({ 
      centerMode: true, 
      centerPadding: '60px', 
      dots: false, 
      infinite: true, 
      speed: 300, 
      slidesToShow: 4, 
      slidesToScroll: 1, 
      arrows: true 
     }); 
     });

DEMO: http://jsfiddle.net/schwany23/j39j568c/

источник

2015-03-11 Schwan Park

В вашей скрипке вы забыли добавить файл slick-theme.css в качестве внешнего ресурса. Если вы хотите следовать стилю по умолчанию автора, вам нужен этот файл. Или, если вы хотите свой собственный стиль, тогда, пожалуйста, продолжайте и создайте свой собственный стиль и сделайте его собственным .css-файлом.

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>

и это CSS для видимости,

.slick-prev:before, .slick-next:before{ 
    color:red; 
}

The updted jsFiddle can be found here.

Фрагмент кода здесь ...

$(document).ready(function() { 
 
    $('.slider').slick({ 
 
    centerMode: true, 
 
    centerPadding: '60px', 
 
    dots: true, 
 
    /* Just changed this to get the bottom dots navigation */ 
 
    infinite: true, 
 
    speed: 300, 
 
    slidesToShow: 4, 
 
    slidesToScroll: 1, 
 
    arrows: true 
 
    }); 
 
});

body { 
 
     background-color: #fff; 
 
     } 
 
     .slider { 
 
     margin: 60px auto; 
 
     width: 500px; 
 
     } 
 
     div { 
 
     height: 100%; 
 
     } 
 
     p { 
 
     text-align: center; 
 
     font-size: 12px; 
 
     color: white; 
 
     } 
 
     /* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */ 
 
     .slick-prev:before, 
 
     .slick-next:before { 
 
     color: red; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://kenwheeler.github.io/slick/slick/slick.js"></script> 
 
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/> 
 
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/> 
 

 
<div class="slider"> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" /> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" /> 
 
    </div> 
 
</div>

Надеюсь, что это помогает

источник

2015-03-11 23:08:59 Sai

Большое вам спасибо за помощь! –

@SchwanPark - рад помочь. Теперь, если это приемлемое решение вашей проблемы, пожалуйста, отметьте его (зеленая галочка), чтобы в будущем кто-то имел такую же проблему, это может пригодиться – Sai

Я включил slick-theme.css, но цвет стрелки по умолчанию белый, что на белом фоне эффективно невидимо. @ Sai's css, чтобы покрасить их красным, делает очевидным, что они там. – SteB

Если вы включили пятно-theme.css и по-прежнему возникают проблемы, это происходит потому, что тема ожидает чтобы быть в подпапке (например, /theme/slick-theme.css), но загрузка по умолчанию помещает slick-theme.css в ту же папку, что и ajax-loader.gif, и папку шрифтов, на которые ссылаются ссылки.

Вставьте файл slick-theme.css в подпапку или отредактируйте css, чтобы он больше не пытался искать родительскую папку. Вам также может потребоваться изменить цвет стрелок, как предложено Sai

источник

2015-12-08 00:25:24 Keypad

Slick Slider Следующие стрелки не отображаются

ответ

Смежные вопросы