Slick Carousel from JSON

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/kenwheeler/slick/master/slick/slick.css">
<script src="http:////ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>
<div class="map">
            <div>
                <div class="step">
                    <div class="m_left"><a href="#" class="next-slide"> nextPage</a></p></div>
                    <div class="m_right"><img src="https://www.google.com/images/srpr/logo11w.png"></div>
                </div>
            </div>
            <div>your second content</div>
            <div>your third content</div>
            <div>your fourth content</div>
        </div>
     </div>

CSS

.auto {
    width:200px;
}
.slick-slider{
    margin-bottom:0;
    padding:26px 0;
}
.slick-slide{
    text-align:center;
    padding: 6px 0;
    border-bottom:1px dashed #999 !important;
}
.slick-slide img{
    width: 100%;
}
.slick-prev:active, .slick-prev:hover, .slick-prev:focus, .slick-next:active, .slick-next:hover, .slick-next:focus {
   background-color:#DDD;
}
.slick-prev{
    border-bottom:1px solid #AAA;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    margin-top:0;
    height:28px;
    background-color:#DDD;
}
.slick-next{
    width:100%;
    border-top:1px solid #AAA;
    position:absolute;
    bottom:0;
    right:0;
    top:auto;
    height:28px;
    background-color:#DDD;
}

JavaScript

$('.map').slick({
              centerMode: true,

          });

          $('.next-slide').click(function(){
              var slider = $( '.map' );
              slider[0].slick.slickGoTo(parseInt(2));
          });