jquery - 背景画像間のフェードによる写真スライドショー

Question

サイトにスライドショーを実装しようとしていますが、問題があります。写真を保持する div を作成し、背景画像を使用して写真を設定することにしました。すべての写真の名前は 1.jpg、2.jpg ... 12.jpg です。

これが部門です...

<div class="featureImg"></div>

...そしてCSS:

#feature .featureImg {
    [...some styling...]

    background-image:url(../img/slideshow/1.jpg);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

ページの読み込み時に画像が表示され、写真がフェードアウトするようにします。これが私が今持っているjQueryですが、以下は機能しません:

• 彼らはお互いの間で消えません

jQuery は次のとおりです。

(function() {
    var curImgId = 1;
    var numberOfImages = 12; // Change this to the number of background images
    window.setInterval(function() {
        $('#feature .featureImg').css('background-image','url(/img/slideshow/' + curImgId + '.jpg)').fadeTo('slow', 1);
        curImgId = (curImgId + 1) % numberOfImages;
    }, 5 * 1000);
})();

質問:ページの読み込み時に写真 (1.jpg など) が表示され、ある写真から次の写真へとフェードアウトするようにするにはどうすればよいですか?