[giwuf]

Есть slick слайдер где на каждом слайде есть по 2 абсолютно спозиционированных интерактивных элемента при клике на которые происходят определенные действия.

Проблема в том, что при переключении слайдов, и эти элементы позиционируются с задержкой и получается эффект их выпрыгивания их стартовой позиции на свои законные места (если повращать слайдер - это видно). В демо примере даже почему-то прибавляется белая область снизу.

Как инициализировать элементы заранее? Фидл

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<style>.slider {
    width: 650px;
    margin: 0 auto;
}

img {
    width: 100%;
    height: 400px;
}
.slick-slide {
    position: relative;
}
#plus-1 {
    position: absolute;
    bottom: 141px;
    right: 20%;
    width: 65px;
    height: 65px;
    cursor: pointer;
}
#plus-2 {
    position: absolute;
    top: 45%;
    left: 20%;
    width: 65px;
    height: 65px;
    cursor: pointer;
}</style>
<script>
$(document).ready(function() {
$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true
});
});</script>
<div class="slider">
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
        <img id="plus-1" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
    <img id="plus-2" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
  </div>
  <div>
    <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
            <img id="plus-1" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
    <img id="plus-2" class="plus-1" src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/063.png" width="65" height="65">
  </div>
</div>