Проблема cо сдвигом slick slider при добавлении его в выпадающий список. Как исправить?

Question

[Alexandr Khabarov]

Господа, прошу помощи! Имеется выпадающий список, список управляет контейнером внутри которого slick slider'ы. При загрузке страницы первый контейнер отображается корректно, но при выборе любого пункта из списка первый слайд отображается наполовину со сдвигом вправо, при перелистывании слайдера, он центрируется и отображается корректно. При повторном выборе этого слайдера в списке, все отображается корректно, как поправить это недоразумение? Я пока очень слаб в коде, поэтому прошу помощи.

HTML:

<div class="center-panel-content">
            <select name="items"  onchange="showBlock(this.value)">
            <option value="0" selected="selected">Выберете тип кабины</option>
            <option value="1">Кабины Evolution</option>
            <option value="2">Кабины Smart</option>
            </select>
            <div class="content-1" id="id1"><!--Evolution-->
                    <div class="item"><img src="img/cabs/evolution/e1.jpg" alt=""></div>
                    <div class="item"><img src="img/cabs/evolution/e2.jpg" alt=""></div>
            </div>
            <div class="content-1" id="id2"><!--Smart-->
                    <div class="item"><img src="img/cabs/smart/s1.jpg" alt=""></div>
                    <div class="item"><img src="img/cabs/smart/s2.jpg" alt=""></div>
                    <div class="item"><img src="img/cabs/smart/s3.jpg" alt=""></div>
            </div>
        </div>

CSS:

.center-panel-content {
    width: 440px;
    height: 620px;    
    text-align: center;
    background-color: white;
    border: 2px solid gold;
}
.content-1 {
    width: 440px;
    border: 5px solid rgb(35, 135, 250);
}
.item {
    margin: 0 auto;
}
#id2{display:none}

Java-script:

function showBlock(val){
    document.getElementById('id1').style.display='none';
    document.getElementById('id2').style.display='none';
    document.getElementById('id'+val).style.display='block';        
}

$(function(){
    $('.content-1').slick({
        dots: true,
        infinite: true,
        speed: 500,
        fade: true,
        cssEase: 'linear'
    });  
  });