Slick - Centered with min-width on large view

Display a centered image with side images on slider. If smaller than responsive breakpoint (1024) change to showing only one slide fully.

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<div class="container">
    <p>Here is my header</p>
    <ul class="slickslide">
        <div>
            <img src="http://placehold.it/1060x400/400&text=active" class="img-responsive" />
        </div>
        <div>
            <img src="http://placehold.it/1060x400/300" class="img-responsive" />
        </div>
        <div>
            <img class="img-responsive" src="http://placehold.it/1060x400/200" />
        </div>
    </ul>
     <h3>Featured News</h3>

    <p>Authoritatively innovate cutting-edge data and client-centered e-tailers. Completely build superior opportunities before standardized customer service. Proactively conceptualize worldwide infomediaries whereas long-term high-impact testing procedures. Compellingly pontificate vertical content rather than cross functional mindshare. Proactively recaptiualize multidisciplinary process improvements before diverse testing procedures.</p>
    <p>Assertively provide access to one-to-one experiences vis-a-vis functional users. Uniquely generate progressive content vis-a-vis professional niche markets. Progressively grow maintainable imperatives vis-a-vis worldwide process improvements. Dramatically evisculate user-centric interfaces whereas standardized networks. Authoritatively unleash multifunctional channels rather than B2B models.</p>
    <p>Proactively simplify seamless channels through intermandated alignments. Synergistically unleash scalable best practices rather than magnetic best practices. Dramatically benchmark multifunctional e-business before next-generation partnerships. Phosfluorescently plagiarize extensible core competencies and unique value. Dramatically administrate market-driven supply chains.</p>
</div>

CSS

.slick-slider {
    margin-bottom: 0;
    position:relative;
}
ul.slickslide {
    padding-left:0;
    max-width:100%;
}
ul.slickslide div img {
    width:100%;
    height:auto;
}
.slick-prev:before, .slick-next:before {
    color:#888;
}
.slick-prev {
    left: 10px;
}
.slick-next {
    right: 10px;
}
.slick-dots {
    bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color:rgba(0, 0, 0, 0.5);
}
.slick-dots li {
    width: 5px;
    height:14px;
}
.slick-dots li button:before {
    font-size: 9px;
    color: #fff;
    opacity: 0.75;
    line-height: 14px;
}
.slick-dots div.slick-active button:before {
    color: #ffcb05;
    opacity: 0.75;
}
/* loading issue fix; https://github.com/kenwheeler/slick/issues/790 */
.slick-slider .slick-track {
    min-width:100%;
}

JavaScript

$().ready(function (e) {

    $('.slickslide').slick({
        dots: true,
        infinite: true,
        speed: 500,
        fade: false,
        slide: 'div',
        cssEase: 'linear',
        centerMode: true,
        slidesToShow: 1,
        variableWidth: true,
        autoplay: true,
        autoplaySpeed: 4000,
        responsive: [{
            breakpoint: 1200,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 3
            }
        }, {
            breakpoint: 1024,
            settings: {
                arrows: false,
                centerMode: false,
                centerPadding: '40px',

                variableWidth: false,
                slidesToShow: 1
            }
        }]
    });

});