Slick Slider Contribution

A Base fiddle for use in the issue section of github https://github.com/kenwheeler/slick/issues

by Marc Cots Navarro

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<section class="slider">
    <div style="background:blue">slide1</div>
    <div style="background:green">slide3</div>
    <div style="background:orange">slide4</div>
    <div style="background:red">slide5</div>
</section>

SCSS

.slider { margin: 0; }

.slick-slide { 
  color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-next {
    position: absolute;
    right: 10px;
}
.slick-prev {
    position: absolute;
    left: 10px;
    z-index: 1;
}

.slick-dots {
    bottom: -30px;
}

JavaScript

$(".slider").slick({
    autoplay: true,
    dots: true,
});