Slick slider demo

http://community.sitepoint.com/t/how-to-make-a-mutliple-items-slider/194539/

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<section class="team">
        <div class="container">
            <div class="team__inner">
                <div class="team__inner-title">
                    Team
                </div>
            </div>
            <div class="team__inner-slider">
                <div class="team__inner-slider-box">
                    <div class="team__images" style="background-image: url(./images/people/person-one.png);">
                    </div>
                </div>
                <div class="team__inner-slider-box">
                    <div class="team__images" style="background-image: url(./images/people/person-two.png);">
                    </div>
                </div>
                <div class="team__inner-slider-box">
                    <div class="team__images" style="background-image: url(./images/people/person-three.png);"></div>
                </div>
                <div class="team__inner-slider-box">
                    <div class="team__images" style="background-image: url(./images/people/person-one.png);">
                    </div>
                </div>
                <div class="team__inner-slider-box">
                    <div class="team__images" style="background-image: url(./images/people/person-two.png);">
                    </div>
                </div>
            </div>
        </div>
    </section>

SCSS

.team{
    background-color: grey;
    padding-bottom: 120px;
    &__inner{
        display: flex;
        justify-content: center;
        &-title{
            z-index: 1;
            margin-top: 105px;
            padding-bottom: 17px;
            font-size: 48px;
            color: blue;
            width: 177px;
            text-align: center;
            border-bottom: 3px solid yellow;
        }
        &-slider{
            margin-top: 42px;
            position: relative;
            &:before{
                position: absolute;
                content: '';
                background-color: #fff;
                height: 4px;
                width: 100%;
                bottom: 0;
            }
            &-box{
               text-align: center;
                .team__images{
                    background-repeat: no-repeat;
                    display: inline-block;
                    height: 345px;
                    width: 260px;
                }
                .team__images + .team__images{
                    margin-left: 60px;
                }
            }
        }
    }
}
.team__inner-slider .slick-next:before {
    position: absolute;
    content: '\f054';
    font-family: 'icomoon';
    height:  60px;
    width: 60px;
    top: 70px;
    right: 23px;
    padding: 19px 0 0 4px;
    border-radius: 50%;
    background-color: yellow; 
    color: #003d86;
}
.team__inner-slider  .slick-prev:before {
    position: absolute;
    content: '\f053';
    font-family: 'icomoon';
    height:  60px;
    width: 60px;
    top: 70px;
    right: -60px;
    padding: 19px;
    border-radius: 50%;
    background-color: yellow; 
    color: #003d86;
    z-index: 10;
}

JavaScript

$(function(){
   

    $('.team__inner-slider').slick({
        autoplay: true,
        autoplaySpeed: 3000 ,
        dots: true,
        infinite: true,
        speed: 600,
        slidesToShow: 3,
        slidesToScroll: 1 ,
        centerMode: true ,
        adaptiveHeight: true,
       
        
        
      });
});