slick.jsで作ったスライダーが最初だけ表示されない。

html
1<div class="items cl">
2  <div class="items_children"><img src="hogehoge.png"></div>
3  <div class="items_children"><img src="hogehoge.png"></div>
4  <div class="items_children"><img src="hogehoge.png"></div>
5</div>

javascript
1
2$(function(){
3  $(document).ready(function(){
4    $('.items').slick({
5      prevArrow: '<span class="prev"><img src="<?php echo get_template_directory_uri(); ?>/common/img/base/ui30.png"></span>',
6      nextArrow: '<span class="next"><img src="<?php echo get_template_directory_uri(); ?>/common/img/base/ui31.png"></span>',
7      slidesToScroll: 1,
8      slidesToShow: 1
9    });
10  });
11});

こちらのコードで、スライダーを実現したいのですが、ページをロードした後、画像が表示されず（widthが0になっているもよう）
next prevは表示されているのでそれを押すと、初めて画像が表示されます。

この現象はどうすれば直りますでしょうか？
CSSを!importantでwidthを付け足したりしてみたのですが、改善できず、ご教示をお願いいたします。

.slick-trackが

css
1opacity: 1;
2width: 0px;
3transform: translate3d(0px, 0px, 0px);

.items_childrenが

css
1width: 0px;

になっています。
jsで適用されたcssなので、!importantで上書きするしかないのですが、それも効きません。

プラグインはこちらのバージョンを使っています。

追記です。
周辺のHTMLとcssは以下のようになっています。

html
1<div class="info_fl cl">
2  <div class="right">
3    <p class="title">hogeohge</p>
4    <p class="hour">00:00～00:00</p>
5    <p class="details">東京都港区～</p>
6  </div>
7  <div class="left">
8    <div class="view_fig cl">
9      <div class="items cl">
10        <div class="items_children"><img src="hogehoge.png"></div>
11        <div class="items_children"><img src="hogehoge.png"></div>
12        <div class="items_children"><img src="hogehoge.png"></div>
13      </div>
14    </div>
15  </div>
16</div>

css
1#page.in.map .machine_list .bg_yellow .info_fl {
2    margin: 0 -15px;
3}
4#page.in.map .machine_list .bg_yellow .info_fl > .right {
5    float: right;
6    width: 50%;
7    box-sizing: border-box;
8    padding: 0 15px;
9}
10#page.in.map .machine_list .bg_yellow .info_fl > .left {
11    float: left;
12    width: 50%;
13    box-sizing: border-box;
14    padding: 0 15px;
15}
16#page.in.map .machine_list .bg_yellow .info_fl > .right .title {
17    margin-bottom: 15px;
18    font-size: 14px;
19    padding: 3px 0 3px 0;
20}
21#page.in.map .machine_list .bg_yellow .info_fl > .right .hour {
22    background: url(../img/base/ui11.png) left center no-repeat;
23    background-size: 20px 25px;
24    padding-left: 25px;
25    margin-bottom: 15px;
26    font-size: 14px;
27    padding: 3px 0 3px 25px;
28}
29#page.in.map .machine_list .bg_yellow .info_fl > .right .details {
30    background: url(../img/base/ui07.png) left center no-repeat;
31    background-size: 20px 25px;
32    padding-left: 25px;
33    margin-bottom: 15px;
34    font-size: 14px;
35    padding: 3px 0 3px 25px;
36}
37#page.in.map .machine_list .bg_yellow .info_fl > .left .view_fig .items {
38    position: relative;
39}
40