備忘録2018.01.22クロスフェード効果スライダーのjavascript最近WEBサイトで当然の如く使われているスライダーですが、多くのデザイナー、コーダーが、外国人が作って公開しているプラグインを使っているようです。私はこの状況が不愉快でなりません。いうのも公開されているプラグインの多くが多機能汎用性を重んじるあまり、不具合やバグが非常に多く結果的にWEBサイトの質を下げているからです。不具合やバグはレスポンシブ対応時によく現れます。画面幅が狭くなり、表示されている画像の大きさが変わると画像の表示領域の下に意図しないマージンができたり、画像の一部が欠けたり、ループが止まったりなど。そこで今回は、不具合の出ないクロスフェード効果のスライダーを自作する方法、具体的なソースコードの一例を紹介します。スライダーは仕組みが分かりさえすれば、自作することは容易です。jQueryがそれを可能にしてくれます。以下に具体例を示していきます。*/}外枠の".slide"の内部要素であるimgは絶対配置とするため、".slide"には高さがありません。そのためCSSで具体的な高さを定義しておく必要がありますが、レスポンシブ対応をしなければならないので、完全に高さを固定するわけにはいきません。そこで、疑似要素の:beforeを利用して".slide"に高さを与えています。}};slider.imgchange();});上記のコードは、sliderというオブジェクトに必要な設定値と変数と関数とjQueryオブジェクトをパッケージしています。スライドを開始するときには、sliderのメソッドimgchangeを呼び出します。以上、クロスフェード効果スライダーの作成方法でした。次回は気が向いたときに、左右に無限スクロールするおなじみのスライダーのソースコードを紹介します。ツイート(メモ)スマホとPCを判別してリダイレクトする.htaccessの書き方WordPressのドメイン変更、DB書き換え最近の記事WordPressの投稿データを整形したCSVでダウンロード・予備情報WordPressのドメイン変更、DB書き換えクロスフェード効果スライダーのjavascript(メモ)スマホとPCを判別してリダイレクトする.htaccessの書き方ブラウザシェアからIE8以下がほぼ消滅WordPressの編集画面にファイルアップローダー付きの独自メタボックスを追加するフリーランスのWEBデザイナー中原敏伸です。福岡市圏内で営業してます。WEBサイトやインターネットに関するお悩み、ご相談をお寄せください。RESERVED.上へ。