Uikitを使ったスライドショーの画像が見えない

お世話になっております。

UIkitを使用してスライドショーを作成しましたが、
初回表示時にはじっこの画像が見えないです。画像のローディング的な問題なのでしょうか。

一枚スライドを動かす（クラス slideTriggerを一回押す）と問題なく表示されます。

html
1      <div class="top__slideBlock">
2        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">
3          <ul class="uk-slider-items">
4            <li class="uk-width-auto">
5              <div class="uk-panel"><img src="https://tools.arashichang.com/1100x560/ad62aa/ffffff.png?text=test1.png" alt=""></div>
6            </li>
7            <li class="uk-width-auto">
8              <div class="uk-panel"><img src="https://tools.arashichang.com/1100x560/dcd6f7/ffffff.png?text=test2.png" alt=""></div>
9            </li>
10            <li class="uk-width-auto">
11              <div class="uk-panel"><img src="https://tools.arashichang.com/1100x560/a6b1e1/ffffff.png?text=test3.png" alt=""></div>
12            </li>
13            <li class="uk-width-auto">
14              <div class="uk-panel"><img src="https://tools.arashichang.com/1100x560/424874/ffffff.png?text=test4.png" alt=""></div>
15            </li>
16            <li class="uk-width-auto">
17              <div class="uk-panel"><img src="https://tools.arashichang.com/1100x560/f35588/ffffff.png?text=test5.png" alt=""></div>
18            </li>
19          </ul><a class="slideTrigger__01 uk-position-center-left uk-position-small" href="#" uk-slidenav-previous="" uk-slider-item="previous"></a><a class="slideTrigger__02 uk-position-center-right uk-position-small" href="#" uk-slidenav-next="" uk-slider-item="next"></a>
20        </div>
21      </div>
22

cssなどは画像サイズの変更以外は特にユニークなものを入れておりません。
問題解消できる方法がありましたらご教示をよろしくお願いいたします。

hoshi-takanori

2020/03/06 00:51

test1.png は最初のページなので、その前のページが存在しないからでは？

行動規範の内容に同意します

回答1件

自己解決

すみません、自己解決しました。

・スライドで見えていない画像をliの一番上に持っていく
・Slideshownumberを0から１へ変更する
・uk-slider='center: true;index:1'　を記述する　ことで解決しました。

pug
1    .uk-position-relative.uk-visible-toggle.uk-light(tabindex='-1', uk-slider='center: true;index:1')
2        ul.uk-slider-items
3          li.uk-width-auto
4            .uk-panel
5              img(src='https://tools.arashichang.com/1100x560/f35588/ffffff.png?text=test5.png', alt='')
6          li.uk-width-auto
7            .uk-panel
8              img(src='https://tools.arashichang.com/1100x560/ad62aa/ffffff.png?text=test1.png', alt='')
9          li.uk-width-auto
10            .uk-panel
11              img(src='https://tools.arashichang.com/1100x560/dcd6f7/ffffff.png?text=test2.png', alt='')
12          li.uk-width-auto
13            .uk-panel
14              img(src='https://tools.arashichang.com/1100x560/a6b1e1/ffffff.png?text=test3.png', alt='')
15          li.uk-width-auto
16            .uk-panel
17              img(src='https://tools.arashichang.com/1100x560/424874/ffffff.png?text=test4.png', alt='')
18        a.slideTrigger__01.uk-position-center-left.uk-position-small(href='#', uk-slidenav-previous='', uk-slider-item='previous')
19        a.slideTrigger__02.uk-position-center-right.uk-position-small(href='#', uk-slidenav-next='', uk-slider-item='next')
20