Slick Slider - CenterMode Slides with Links

Testing the Slick Slider with centerMode slides that have external links. https://github.com/kenwheeler/slick/issues

by AJIEKCEU

HTML

<script src="http://cdn.jsdelivr.net/jquery.slick/latest/slick.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/latest/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/latest/slick-theme.css">
<!--              ^
    Use the FORK, Luke.
    create your own new fiddle test case.
-->

<section class="slider">
    <a href="http://www.google.com" target="_blank">
        <img src="http://placehold.it/200&text=1:+Google" alt="Slide 1" />
    </a>
    <a href="http://www.yahoo.com" target="_blank">
        <img src="http://placehold.it/200&text=2:+Yahoo" alt="Slide 2" />
    </a>
    <a href="http://www.youtube.com" target="_blank">
        <img src="http://placehold.it/200&text=3:+YouTube" alt="Slide 3" />
    </a>
    <a href="http://www.facebook.com" target="_blank">
        <img src="http://placehold.it/200&text=4:+Facebook" alt="Slide 4" />
    </a>
    <a href="http://www.twitter.com" target="_blank">
        <img src="http://placehold.it/200&text=5:+Twitter" alt="Slide 5" />
    </a>
    <a href="http://www.instagram.com" target="_blank">
        <img src="http://placehold.it/200&text=6:+Instagram" alt="Slide 6" />
    </a>
</section>

CSS

* {
    box-sizing: border-box;
}

.slider {
    width: 600px;
    margin: 0 auto;
}

a {
    border: 2px solid #FFF;
    transition: opacity 500ms ease;
}

a.slick-center {
    opacity: 1;
    z-index: 2;
    transform: scale(1.25);
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}

.slick-prev::before,
.slick-next::before {
    color: #00C
}
.slick-slide{
  z-index: 1;
  transition: all .3s ease;
}
.slick-list{

  padding-top: 100px!important;
  padding-bottom: 100px!important;
}

JavaScript

/**
    This fiddle is using the latest version 
    of Slick and jQuery.

    If your issue occurs in older version; please 
    use the "External Resources" section 
    in the sidebar.
**/


$(".slider").slick({
    centerMode: true,
    centerPadding: '0',
    slidesToShow: 3,
    focusOnSelect: true
});