Webサイト制作

投稿日:2017年5月9日 更新日:

jQueryで実装!画像の無限ループスライダー

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 jQueryで無限ループスライダー

無限ループスライダー実装イメージ

無限ループスライダーって、
ギャラリーとか、店舗紹介とか
クリックしてもらうほどではないけど画像を見てもらいたいって時に便利かなと思います。

  • aaa
  • bbb
  • ccc
  • ddd
  • eee
  • fff
  • ggg
  • hhh
  • iii

実装時のつまづきその1:1周目と2周目の間が切れる

私が実装した時は
参考サイトと同じようにcssで任意の画像サイズと横幅を指定し、さらに画像と画像の間にmarginをとったところ、1周目と2周目の間に空白ができてしまい切れてしまった。

サイトのコメント欄を見てみると
どうやらcssのブラウザリセットができていない可能性があるらしく、以下を追記で解消。

#loopslider * {
margin: 0;
padding: 0;
}

実装時のつまづきその2:最初と最後の画像の間に空白ができる

1周目と2周目はつながったけど、
最後の画像が表示されていないので空白が表示されスムーズなスライドができてない。

何でだろ~~~~と思ってたらどうやら自分で追記したmarginのせいだった。

これはliの横幅にmarginの値を含めることで解消!!
分かるまで時間がかかったので次に実装する時に同じことを繰り返さないようメモ・・・

- Webサイト制作
-

関連記事

mmenuは初心者でも簡単に使えるjQuery plugin|スマホ用メニュー

スマホ用メニューを作成する時によく使っているのがjQuery pluginのmmenuあまりjQuery詳しくない私でも簡単に使えるところが気に入ってます。オプションで色々設定もできるみたいなので、初 ...

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ ...

cssでlistのborderを斜め線にする

このサイトのメニューでも使ってますが、やってみたかったけどなかなか方法が見つけられなかったリストの区切り(border)を直線でなく斜め線にする方法。 まずはHTMLでメニュー作成 普通にリストで作成 ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

背景画像を複数指定する方法(css)

背景画像を複数指定したい時があり調べてたところ 順番にcssを指定するところまでは分かったけど書き方がよく分からない・・・ 複数背景の使用はよく使いそうなのでメモ。 基本的には,(カンマ)区切りで続け ...