プラグインのslickスライダーを使い背景画像が切り替わるようしたいのですが画像が出ません。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
https://ryotaro-vvv.com/slick/
↑こちらのサイトを参考にしておりますが、cssで設定した背景画像が出ません。
どのようにすれば背景画像が切り替わるようになるのでしょうか？

該当のソースコード

  <ul class='slider'>
     <li><img src=""><div class='slide-bg1'></div></li>
     <li><img src=""><div class='slide-bg2'></div></li>
     <li><img src=""><div class='slide-bg3'></div></li>
     <li><img src=""><div class='slide-bg4'></div></li>
  </ul>

/*slick setting*/
ul.slider li img div.slide-bg1 {
  background-image: url(../images/front/mainvisual.jpg);
  height: 805px;
}
ul.slider li img div.slide-bg2 {
  background-image: url(../images/front/mainvisual.jpg);
  height: 805px;
}
ul.slider li img div.slide-bg3 {
  background-image: url(../images/front/mainvisual.jpg);
  height: 805px;
}
ul.slider li img div.slide-bg4 {
  background-image: url(../images/front/mainvisual.jpg);
  height: 805px;
}

    <script>
    $(function(){
      $('.slider').slick({
        speed: 1000,
        dots: true,
        lazyLoad:'ondemand',
      });
    });
    </script>

Answer 1

取り急ぎ、下記CSSセレクタは間違っています。
(<img>タグの子要素として<div class="slide-bg1">がある、という指定になってしまっているため)
誤: ul.slider li img div.slide-bg1

以下を試してみてください。
正: ul.slider li div.slide-bg1
もしくは
正: ul.slider li img + div.slide-bg1

そのほか、画像のパスが合っているか、ul.slider liの幅や高さが0になってしまっていないかは
チェックしたほうがいいと思います。

Comments

[oyu]

ありがとうございます。
パスの指定が間違っていたのですね。