カルーセル画像のライブラリとしては slick.js が個人的な定番になっています。

jquery を使っているので実行は

$(function(){
});

の中に記述していたのですが、画像の点数が多かったりして読み込みに時間がかかってしまうと JavaScript での横幅の計算に支障が起きるようで表示が崩れてしまうことがあります。

ということで slick.js はページの読み込みが全て終わってから行うように

$(window).load(function() {
});

の中に記述するようにしました。
更にいうとカルーセル部分は最初は display: none; にしておいて、slick.js の実行が完了したら表示するようにすればよりユーザビリティを高くすることができますね。

常識レベルの内容かもしれないですが自分への戒めの意味も込めて記録として残しておきます。


0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください