よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー
無限ループスライダー実装イメージ
無限ループスライダーって、
ギャラリーとか、店舗紹介とか
クリックしてもらうほどではないけど画像を見てもらいたいって時に便利かなと思います。
実装時のつまづきその1：1周目と2周目の間が切れる
私が実装した時は
参考サイトと同じようにcssで任意の画像サイズと横幅を指定し、さらに画像と画像の間にmarginをとったところ、1周目と2周目の間に空白ができてしまい切れてしまった。
サイトのコメント欄を見てみると
どうやらcssのブラウザリセットができていない可能性があるらしく、以下を追記で解消。
#loopslider * {
margin: 0;
padding: 0;
}
実装時のつまづきその2：最初と最後の画像の間に空白ができる
1周目と2周目はつながったけど、
最後の画像が表示されていないので空白が表示されスムーズなスライドができてない。
何でだろ～～～～と思ってたらどうやら自分で追記したmarginのせいだった。
これはliの横幅にmarginの値を含めることで解消！！
分かるまで時間がかかったので次に実装する時に同じことを繰り返さないようメモ・・・
