Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

SlickでasNavForしたときにうまく動かない

More than 1 year has passed since last update.

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>

など、オリジナルのクラスをつけてスタイルをつけてしまいましょう。

参考サイト様 ( https://github.com/kenwheeler/slick/issues/475 )

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away