目次
前回の続き- DOMの構造に問題があった
- slick以外の方法でスライダーの実装を検討する
- 課題
DOMの構造に問題があった
前回、ポートフォリオにスライダープラグインslickの実装をしてみたところ、読み込みが非常に遅くなってしまうという問題が起こりました。
コードを書き換えた際に、見た目を確認するためにページをリロードしようとすると、なかなかページが表示されないという状態です。
この件についてオンラインスクールの先生に伺ったところ、
「<ul>と<li>のリスト形式で作っていないからではないか」
とのご指摘をいただきました。
その時私は、slickの公式サイトを参照の上、以下のようなDOM構造でHTMLを記載していました。
<div class="my-slider">
<div>
<img src="画像１">
</div>
<div>
<img src="画像２">
</div>
<div>
<img src="画像３">
</div>
</div>
それを、以下のように書き換えたところ、一瞬でページをリロードできるようになりました。
<ul>
<li>
<div>
<img src="画像１">
</div>
</li>
<li>
<div>
<img src="画像２">
</div>
</li>
<li>
<div>
<img src="画像３">
</div>
</li>
</ul>
slick以外の方法でスライダーの実装を検討する
今回はslickでスライダーを実装しましたが、スライダーを実現する方法はslickだけではありません。
どうしても上手くいかない時には、slickにこだわらず、別の方法で実現できないか代替策を考える力も必要だと思いました。
私はBootstrapも学んでいたので、そちらでも簡単なスライダーを作ることはできたでしょう。
もちろん、どうして上手くいかないのか、原因を特定することも大きな学びになるので大切ですが、時間とスキルアップとどちらを優先するかは、その時の状況次第かと思います。
課題
今回感じたことは、自分で調べることには限界があるということです。
公式サイトに書いてあるDOM構造で上手くいかないとは思ってもいなかったのと、公式サイトは英語なので、説明をすべて理解できているわけでもありません。
色々なサイトを見てリスト形式のDOM構造で書いてあるのを見たとしても、divとulでそこまで大きな違いが出てくるとは思いませんでした。
まだまだ知らないことだらけなので、経験者から直接学ばせていただくことは重要だと感じました。