Slick slider example

index.html

<div class="slick-carousel">
  <div><div class="slide-content">1 your content</div></div>
  <div><div class="slide-content">2 your content</div></div>
  <div><div class="slide-content">3 your content</div></div>
  <div><div class="slide-content">4 your content</div></div>
  <div><div class="slide-content">5 your content</div></div>
  <div><div class="slide-content">6 your content</div></div>
  <div><div class="slide-content">7 your content</div></div>
  <div><div class="slide-content">8 your content</div></div>
  <div><div class="slide-content">9 your content</div></div>
  <div><div class="slide-content">10 your content</div></div>
</div>

script.js

$().ready(function(){
  $('.slick-carousel').slick({
    arrows: true,
    centerPadding: "0px",
    dots: true,
    slidesToShow: 1,
    infinite: false
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>

slick-slider-example.markdown

Slick slider example

Basic slick slider to test init settings

A Pen by Joe Hastings on CodePen.

License.

style.less

@gutters: 10%;

body {
  background: #333;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  
  .slick-slide {
    .slide-content{
      margin: 0 @gutters;
      padding: 50px 100px;
      background: #fff;
    }
  }
  
  .slick-list {
     margin: 20px 0px;
  }
  
  .slick-prev,
  .slick-next {
    position: absolute;
    right: @gutters;
    background: #777;
    border: none;
    color: transparent;
    width: 30px;
    height: 30px;
   
    &:before { 
      content: ">"; 
      color: #fff; 
      font-size: 25px;
    }
  }
  
  .slick-prev { 
    left: @gutters; 
    &:before { content: "<"; }
  }
  
  .slick-dots {
    list-style: none;
    margin: 0 auto;
    text-align: center;
    
    li {
      display: inline-block;
      
      button { 
        transition: 0.2s background-color ease-in-out 0s;
        border: none;
        padding: 0;
        color: transparent;
        
        width: 10px;
        height: 10px;
        background-color: #777;
        margin-right: 10px;
        border-radius: 50%; 
      }

       &.slick-active button { background-color: #fff; }
    }
  }
}

styles

<link href="https://cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css" rel="stylesheet" />