Slick Slider Las flechas siguientes no se muestran

Estoy intentando que las flechas siguiente y anterior aparezcan al lado del control deslizante del producto, al igual que en el ejemplo Slick Slider. Pero mi muestra no parece cargar las fonts adecuadas para que eso suceda.

Aquí está mi código:

HTML

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/

En su violín, había olvidado agregar el archivo slick-theme.css como recurso externo. Si desea seguir el estilo predeterminado del autor, necesita ese archivo. O si quieres tu propio estilo, sigue adelante y crea tu propio estilo y haz que sea tu propio archivo .css de tema o algo así.

  

y este CSS para visibilidad,

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

El jsFiddle actualizado se puede encontrar aquí .

Fragmento de código aquí …

 $(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; } 
    

Si ha incluido slick-theme.css y todavía tiene problemas, es porque el tema espera estar en una subcarpeta (por ejemplo /theme/slick-theme.css) pero la descarga predeterminada coloca slick-theme.css en el mismo carpeta como ajax-loader.gif y la carpeta de fonts a las que se hace referencia desde el tema.

Solución: coloque el archivo slick-theme.css en una subcarpeta o edite el css para que ya no intente buscar en una carpeta principal. También puede necesitar cambiar el color de las flechas como lo sugirió Sai

si la flecha está sobre un fondo blanco simplemente agrega un color para ellos en tu CSS así:

 .slick-prev:before, .slick-next:before { color: #09529b !important; }