Slick.js Slider

Slick.js slider (syncing) with Bootstrap

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.3.14/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.3.14/slick.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<article class="client-investments-hero container">
    <div class="row">
        <div class="col-sm-4 client-investment-col-left">
            <div class="client-inner-wrap">
                 <h3>Heading Big</h3>

                <p>Bootstrap (currently v3.3.0) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p> <a href="#">View All</a>

            </div>
        </div>
        <div class="col-sm-8 client-investment-col-right">
            <div class="slide-images">
                <div class="slider slider-for">
                    <div>
                        <img src="https://octodex.github.com/images/minertocat.png">
                    </div>
                    <div>
                        <img src="https://octodex.github.com/images/mountietocat.png">
                    </div>
                    <div>
                        <img src="https://octodex.github.com/images/saketocat.png">
                    </div>
                </div>
            </div>
            <div class="slider-col slider-describe">
                <div class="slider slider-nav">
                    <div class="description-item">
                         <h4>SLIDE ONE</h4>

                        <p>Chambray bitters farm-to-table sustainable. Meggings umami Tumblr messenger bag master cleanse, chia kogi small batch iPhone kitsch PBRB mustache.</p>
                    </div>
                    <div class="description-item">
                         <h4>Slide TWO</h4>

                        <p>Kale chips gentrify Blue Bottle...

CSS

img {
    width: 200px;
}
.client-investments-hero {
    margin-bottom: 40px;
}
.client-investment-col-left {
    background: #fff;
    padding-right: 0;
}
.client-investment-col-right {
    padding-left: 0;
}
.client-inner-wrap {
    padding: 35px;
}
.slider-col {
    float: left;
    width: 30%;
}
.slide-images {
    float: left;
    width: 70%;
}
.slider-describe {
}
.description-item {
    background: $accent;
    p {
        font-size: 1.0em;
        font-weight: 400;
    }
}
.slider-describe .description-item h4, .slider-describe .description-item p {
    padding-left: 10px;
    padding-right: 10px;
}
.slick-dots {
    bottom: -15px;
}

JavaScript

//using WordPress so i kept the noconflict stuff in there
jQuery(document).ready(function ($) {
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav'
    });

    $('.slider-nav').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: true,
        focusOnSelect: true,
        arrows: false
    });
});