Custom Slick Slider Arrows

Custom Slick Slider Arrows for previous/next slider

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>
            <img src="http://placehold.it/1600x724/400&text=active" class="img-responsive" />
        </li>
        <li>
            <img src="http://placehold.it/1600x724/300" class="img-responsive" />
        </li>
        <li>
            <img class="img-responsive" src="http://placehold.it/1600x724/200" />
        </li>
    </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-prev {
    left: 10px;
}
.slick-next {
    right: 10px;
}
 .slick-prev:before, .slick-next:before { color:#fff; height:100px; width:30px;}

.slick-prev:before {
            content:none;
}
.slick-next,.slick-prev,.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { top:25%; height:150px;  width:20px;background-image:url('http://globalleaderstoday.com/images/slide-next.png'); background-position:right; background-size:contain;



  transition: all 0.7s linear;
  -webkit-transition: all 0.7s linear;
  -moz-transition: all 0.7s linear;
  -o-transition: all 0.7s linear;
  -ms-transition: all 0.7s linear;

}
.slick-next:hover {background-image:url('http://globalleaderstoday.com/images/slide-next2.png'); }
.slick-prev,.slick-prev,.slick-prev:hover, .slick-prev:focus {background-image:url('http://globalleaderstoday.com/images/slide-prev.png'); }
.slick-prev:hover {background-image:url('http://globalleaderstoday.com/images/slide-prev2.png'); }
.slick-next:before,.slick-prev:before {
       content:none;
}

/* slider setup */
.slick-slider {
    margin-bottom: 0;
    position:relative;
}
ul.slickslide {
    padding-left:0;
    max-width:100%;
}
ul.slickslide li img {
    width:100%;
    height:auto;
}
 
/* loading issue fix; https://github.com/kenwheeler/slick/issues/790 */
.slick-slider .slick-track {
    min-width:100%;
}

JavaScript

$().ready(function (e) {
     
 $('.slickslide').slick({
        dots: false,
		arrow: true,
        infinite: true,
        speed: 500,
        fade: false,
        slide: 'li',
        cssEase: 'linear',
        centerMode: true,
        slidesToShow: 1,
        variableWidth: true,
        autoplay: true,
        autoplaySpeed: 4000,
         arrows: true,
        responsive: [{
            breakpoint: 600,
            settings: {
                arrows: true,
                centerMode: false,
                centerPadding: '40px',
                variableWidth: false,
                slidesToShow: 3
            },
            breakpoint: 1750,
            settings: {
                arrows: true,
                centerMode: false,
                centerPadding: '40px',
                variableWidth: false,
                slidesToShow: 1
            }
        }]
    });
});