最近WEBサイトで当然の如く使われているスライダーですが、多くのデザイナー、コーダーが、外国人が作って公開しているプラグインを使っているようです。
私はこの状況が不愉快でなりません。というのも公開されているプラグインの多くが多機能汎用性を重んじるあまり、不具合やバグが非常に多く結果的にWEBサイトの質を下げているからです。

不具合やバグはレスポンシブ対応時によく現れます。画面幅が狭くなり、表示されている画像の大きさが変わると画像の表示領域の下に意図しないマージンができたり、画像の一部が欠けたり、ループが止まったりなど。

そこで今回は、不具合の出ないクロスフェード効果のスライダーを自作する方法、具体的なソースコードの一例を紹介します。
スライダーは仕組みが分かりさえすれば、自作することは容易です。jQueryがそれを可能にしてくれます。

では以下に具体例を示していきます。

HTML

<div class="slide">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</div>

CSS

.slide{
  position:relative;
}
.slide img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  opacity:0;
}
/* レスポンシブ対応処置 */
.slide:before{
  content:"";
  display:block;
  padding-top:75%; /* 画像の高さを横幅に対する比率で設定 */
}

外枠の".slide"の内部要素であるimgは絶対配置とするため、".slide"には高さがありません。そのためCSSで具体的な高さを定義しておく必要がありますが、レスポンシブ対応をしなければならないので、完全に高さを固定するわけにはいきません。そこで、疑似要素の:beforeを利用して".slide"に高さを与えています。

javascript

$(document).ready(function(){

var slider = {
  speed: 1500,
  interval: 5000,
  element: $('.slide img'),
  current: null,
  imgchange: function(){
    if(slider.current!=null) slider.element.eq(slider.current).fadeTo(slider.speed, 0);
    if(slider.current==null){
      slider.current = 0;
    }else{
      slider.current++;
      if(slider.current==slider.element.length) slider.current = 0;
    }
    slider.element.eq(slider.current).fadeTo(slider.speed, 1);
    setTimeout(slider.imgchange, slider.interval);
  }
};

slider.imgchange();

});

上記のコードは、sliderというオブジェクトに必要な設定値と変数と関数とjQueryオブジェクトをパッケージしています。
スライドを開始するときには、sliderのメソッドimgchangeを呼び出します。

以上、クロスフェード効果スライダーの作成方法でした。
次回は気が向いたときに、左右に無限スクロールするおなじみのスライダーのソースコードを紹介します。