Centered Slider (Slick 1.4.1)

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.4.1/slick.css">
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<div class="container">
    <p>Here is my header</p>
    <ul class="slickslide">
        <li>
            <div class="read_more_expandable">
           Authoritatively innovate cutting-edge data and client-centered e-tailers. Completely build superior opportunities before standardized customer service. Proactively conceptualize worldwide. <strong>END COPY</strong> 
          </div>
        </li>
        <li>
          <div class="read_more_expandable">
           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.  <strong>END COPY</strong> 
          </div>
        </li>
        <li>
            <div class="read_more_expandable">
           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.  <strong>END COPY</strong> 
          </div>
        </li>
    </ul>

</div>

CSS

.slick-slider {
    margin-bottom: 0;
    position:relative;
}
ul.slickslide {
    padding-left:0;
    max-width:100%;
}

ul.slickslide li {
  background: red;
  padding: 20px;
  margin: 20px;
}
ul.slickslide li 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;
}
.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 li.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

/*Read More*/
(function (e) {
    e.expander = {
        version: "1.4.7",
        defaults: {
            slicePoint: 100,
            preserveWords: !0,
            widow: 4,
            expandText: "read more",
            expandPrefix: "&hellip; ",
            expandAfterSummary: !1,
            summaryClass: "summary",
            detailClass: "details",
            moreClass: "read-more",
            lessClass: "read-less",
            collapseTimer: 0,
            expandEffect: "slideDown",
            expandSpeed: 250,
            collapseEffect: "slideUp",
            collapseSpeed: 200,
            userCollapse: !0,
            userCollapseText: "read less",
            userCollapsePrefix: " ",
            onSlice: null,
            beforeExpand: null,
            afterExpand: null,
            onCollapse: null,
            afterCollapse: null
        }
    }, e.fn.expander = function (a) {
        function l(e, a) {
            var l = "span",
                s = e.summary;
            return a ? (l = "div", x.test(s) && !e.expandAfterSummary ? s = s.replace(x, e.moreLabel + "$1") : s += e.moreLabel, s = '<div class="' + e.summaryClass + '">' + s + "</div>") : s += e.moreLabel, [s, " <", l + ' class="' + e.detailClass + '"', ">", e.details, "</" + l + ">"].join("")
        }

        function s(e) {
            var a = '<span class="' + e.moreClass + '">' + e.expandPrefix;
            return a += '<a href="#">' + e.expandText + "</a></span>"
        }

        function n(a, l) {
            return a.lastIndexOf("<") > a.lastIndexOf(">") && (a = a.slice(0, a.lastIndexOf("<"))), l && (a = a.replace(c, "")), e.trim(a)
        }

        function t(e, a) {
            a.stop(!0, !0)[e.collapseEffect](e.collapseSpeed, function () {
                var l = a.prev("span." + e.moreClass).show();
                l.length || a.parent().children("div." + e.summaryClass).show().find("span." + e.moreClass).show(), e.afterCollapse && e.afterCollapse.call(a)
        ...