Slick Slider Next Arrows not showing

Question

I\'m trying to get the next and previous arrows to show up next to the product slider, just like in the Slick Slider example. But my sample doesn\'t seem to load the appropriat

Answer 1

In your fiddle, you had forgotten to add the slick-theme.css file as an external resource. If you wanted to follow the default styling of the author, you need that file. Or if you want your own styling then please go ahead and make your own styling and make it youw own theme .css file or something.

and this css for visibility,

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

The updted jsFiddle can be found here.

Code snippet 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;
      }

Hope this helps