サイト制作メモ

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

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

よくサイトで見かけるイメージ画像がひたすら流れるやつをサイトに実装したいと思い調べたところ、下記のサイトに使いやすそうな無限ループスライダーがあったので実装。 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の値を含めることで解消!!
分かるまで時間がかかったので次に実装する時に同じことを繰り返さないようメモ・・・

- サイト制作メモ

関連記事

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 まずはhtml 何でもいいので適当なクラスか何かあたえておいてください。 <p class="text-kirinuk ...

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を"postname"にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが反映されURLは以下のよ ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

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

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

サイト制作に役立つTips_リンク集

スタイルなどの装飾 ボタンのホバーアニメ。 バリエーションが豊富です。デザインのヒントに 【保存版】CSSだけで作れるホバーアニメーションボタン総まとめ 見た目で調節したらプレフィックスまで書いてくれ ...

ゆずむ自己紹介画像
name:ゆずむ
作業時間は平日9:30~17:00です。

翻訳する