slickプラグインでasNavForを使ったときに、
- クリックしても動かない
- 一応動くけど、挙動がおかしい
など、起きたことないでしょうか？
調べると、slickGoToを使って解決や、accessibility: falseで解決。
みたいなのを見かけたんですが、私は直りませんでした。
とりあえず私が解決した方法でご紹介
原因
公式の使い方と違う使い方をしている。
公式には(http://kenwheeler.github.io/slick/)
correct.html
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
とあります。（少し端折ってますが）
これにアレンジを加えて
wrong.html
<div class="your-class">
<div class="slick-slide">your content</div>
<div class="slick-slide">your content</div>
<div class="slick-slide">your content</div>
</div>
といったようにやってないでしょうか？
読み込むまで縦並びになるのがいやで、予め入れてたりしていたのですが、slick-slideを小要素につけてしまうとバグてしまうようです。
解決
小要素にクラス名slick-slideを使わなければ大丈夫です。
なので、読み込み終わるまで縦並びにしたくない場合は
toriaezu.html
<style>
.your-class .your-class-child {
display: none;
}
.your-class .slick-slide .your-class-child {
display: block;
}
</style>
<div class="your-class">
<div class="your-class-child">your content</div>
<div class="your-class-child">your content</div>
<div class="your-class-child">your content</div>
</div>
など、オリジナルのクラスをつけてスタイルをつけてしまいましょう。