2021/3/24slick.jsを使用してドットをカスタマイズして当記事アイキャッチのようなサムネイル付きのスライダーを作る方法をデモを交えながら記します。「slickスライダー初めて」という方はまずこちらからご参考に頂ければと思います。});</script>2スライダー画像をドットにはめ込みますこれはスライダー作成を実行している『$(‘.slider’).slick({~』の上に書きます。}})なんとなくスライダー画像がドットの後ろに入ってるのがわかります。1行目でスライダー初期化時に、2行目でスライドアイテム取得し、3行目でスライドの数だけループ、4行目でループ回数をキーにn番目のスライドを取得し、5行目でn番目のドットを取得し、6行目でn番目のスライド画像のURLを取得し、7行目でn番目のドットにn番目のスライド画像を背景に当て込み、8行目で背景の表示の仕方を指定しています。※6行目で取得したスライド画像のsrcがなぜか『data:image/svg+xml』になるパターンがあるみたいなのでその場合は『.attr('src')』の部分を『.data('src')』にするとうまくいくと思います。100%!important;}結構いい感じになりました。content:""!important;}ドットが消えました。#000;}この記事を書いてから4か月後ぐらいにより、全く別のやり方で、より効率的に同じことが実現できることに気づいたので、再度記事を書きました。ご興味がある方はこちらもご参照ください。最後に全文コードを載せておきます。})</script>以上、slick.jsのドットをカスタマイズしてサムネイルスライダーを作る方法でした。現在、タグの勉強中です。上記のコピペして試してみたらサムネイルが空白になってスライドしました。それとリンクも付けましたが、やはりサムネイルは空白のスライドになります。ご教示いただきたく存じます。PM柴田さんはじめまして、ご質問ありがとうございます!こういう場合は、スライダーのせいなのか、そもそも画像が表示されていないのか、問題の切り分けをするといいかもしれません。部分だけを残して、ブラウザに表示した場合、画像は出ますでしょうか?もし出ない場合は、画像の表示自体がうまくいってないので、画像の表示について調べてみると、いいと思います。画像の表示は下記のサイトなどが、わかりやすい気がします。AMありがとうございます。何度試しても空白のサムネイルになり画像全部が普通にスライドしています。ちなみに画像枚数は7枚になります。PM柴田さんリンクを付けたから画像が表示されなくなるという事はないかと思われます!いいところまではいっていると思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。views2021/1/202023/5/13タイトルとURLをコピーしました。