How to add Slick Slider multiple

https://codepen.io/vilcu/pen/ZQwdGQ

html

<section class="regular slider">

  <div>

    <img src="http://placehold.it/350x300?text=1">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=2">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=3">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=4">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=5">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=6">

  </div>

</section>

<section class="center slider">

  <div>

    <img src="http://placehold.it/350x300?text=1">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=2">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=3">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=4">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=5">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=6">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=7">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=8">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=9">

  </div>

</section>

<section class="variable slider">

  <div>

    <img src="http://placehold.it/350x300?text=1">

  </div>

  <div>

    <img src="http://placehold.it/200x300?text=2">

  </div>

  <div>

    <img src="http://placehold.it/100x300?text=3">

  </div>

  <div>

    <img src="http://placehold.it/200x300?text=4">

  </div>

  <div>

    <img src="http://placehold.it/350x300?text=5">

  </div>

  <div>

    <img src="http://placehold.it/300x300?text=6">

  </div>

</section>

<h1> CSS </h1>

body{

  background:#ccc;

}

.main {

  font-family:Arial;

  width:500px;

  display:block;

  margin:0 auto;

}

h3 {

    background: #fff;

    color: #3498db;

    font-size: 36px;

    line-height: 100px;

    margin: 10px;

    padding: 2%;

    position: relative;

    text-align: center;

}

.action{

  display:block;

  margin:100px auto;

  width:100%;

  text-align:center;

}

.action a {

  display:inline-block;

  padding:5px 10px; 

  background:#f30;

  color:#fff;

  text-decoration:none;

}

.action a:hover{

  background:#000;

}

<h1>js</h1>

 $('.slider-for').slick({

   slidesToShow: 1,

   slidesToScroll: 1,

   arrows: false,

   fade: true,

   asNavFor: '.slider-nav'

 });

 $('.slider-nav').slick({

   slidesToShow: 3,

   slidesToScroll: 1,

   asNavFor: '.slider-for',

   dots: true,

   focusOnSelect: true

 });

 $('a[data-slide]').click(function(e) {

   e.preventDefault();

   var slideno = $(this).data('slide');

   $('.slider-nav').slick('slickGoTo', slideno - 1);

 });