サイト制作メモ

投稿日: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の値を含めることで解消!!
分かるまで時間がかかったので次に実装する時に同じことを繰り返さないようメモ・・・

- サイト制作メモ

関連記事

拡大してもボヤけない、アイコンフォントが便利すぎる

サイト作成の時にメニューアイコンを作っていたけど 3つのメニューのうち1つをアイコンフォント使ってたら表示の鮮明さに驚いた。 他のアイコンはpng形式の画像だったけど全然違う。 通常、画像でできたアイ ...

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

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

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

IE10で要素がはみ出してしまう時の対処法

なぜかIEだけ特定の要素がはみ出てしまうことはありませんか?私はよくあります。 ページ作成をしていてブラウザチェックをしているとよくぶち当たるこの問題。 何度か解決してるけど、しばらくしたら忘れてしま ...

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

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

翻訳する