css スライドショー ループ 13

最初に作成したのは、横に長い画像をスライドさせましたが、ギャラリーなど画像をひとつのアイテムとして扱いたいときの方法をご紹介します。, 画像一枚の場合、をdivで括るだけでしたが、今回は画像を一つずつのアイテムとしたいのでliタグで括りました。さらにリンクも設定したいので、aタグで括りました。, スライドの原理はさっきと同じなので、さっきimgタグだった場所がulに置き換わったというイメージです。, 続いてCSSです。パーツが増えた分、装飾のCSSの記述が多くなりましたが、アニメーション自体は何もいじっていません。, loopSlideのクラスにカーソルを重ねたら、スライドが止まるようにしたいのでloopaSlideのhover時のulにanimation-play-state: paused;としています。. on CodePen. imgA・imgB・imgCはdiv.slider-containerの中のimgタグ（img.slider-img）を表しています。画像と画像の間はvar(--mBetweenImg)ですね。, ここで、div.containerにoverflow: hidden;を指定してやると次のようになります。 そんな無限ループのスライドですが、実はcssだけで実装することができます。 ということで今回は「 cssのみで実装！画面端から無限ループするスライドの作り方 」をご紹介します！ こういうやつ。画像が一方向にずっと流れるアニメーション（下はGIF画像なのでカクカクしているけども）。CodePenにも投稿しています（こちら）。これを、JavaScriptやjQueryのプラグインを使わずに。CSSのみで作ります。 ＊CodePenを開くと画像がすべて読み込まれておらず、ところどころ空欄になってしまっているときがあるかもしれません。その時は、どこかのコードをコメントアウトにし、表示を更新させてから、そのコメントアウトを外して再度表示を更新させると、画像がすべて表示され … 各スライドの共通の動作は以下の順で行うことにします。 右からフレームイン; ちょっと止まる; 左へフレームアウト; お手本の@keyframesでは、各スライド毎に別のルールを設定していますが、工夫すれば1つの@keyframesで実装できます。 無限スライド　複数アイテム by design-levelup (@marurain) By following users and tags, you can catch up information on technical fields that you are interested in as a whole, By "stocking" the articles you like, you can search right away. ランサーズとかココナラとかを通してぜひ依頼してください。 これがループさせるための重要なポイントです。, ちょっと冗長的かなーとは思いますが、今回はあくまでも「CSSのみで完結する」ことが目的なのでご容赦ください！, さきほどslider-wrapは横並びの役割と言いましたが、それがdisplay: flex;です。, width: calc(250px * 6);は、画像一つあたりの横幅 * 枚数（HTML上は2倍）になります。, 一番上のanimation: scroll 10s linear infinite;が横スクロールを動かしています。読めば何となくわかると思いますが、「10秒（10s）サイクルで、一定の変化（linear）で無限（infinite）にスクロール（scroll）させる」という風に書かれています。, さらに、このscrollで、どのようにスクロールさせるかというのを設定しているのがこちらです。, この@keyframesが、アニメーションの始まりから終わりまでの動きを指定しています。実は先ほどで出てきたscrollは、ここで決められた名称なのです。, 0%がアニメーションの開始であり、100%がアニメーションの終了です。ここでのポイントはcalc(-250px * 3)です。, HTML上は画像枚数を６枚指定しましたが、本来の枚数は3枚です。なので、アニメーションの終わりの長さを、「-250px * 3 = -750px」に設定することで、無限ループっぽく表現されるようになります。, コピペだけでも動きますし、そこまで難しくもないのでプログラミング初心者・コーディング初心者の方でも改変が容易です！, フルスタックっぽいエンジニアやってます️ | 筋トレ歴11年のゴリラ | 2019年ブログ連続100記事達成 | 筋トレ、プログラミング情報ならお任せ. なので、アニメーションの終わりの長さを、「-250px * 3 = -750px」に設定することで、無限ループっぽく表現されるようになります。 【まとめ】CSSだけでも無限ループスライダーは作れる. サイト内の画像の見せ方のひとつとして、写真や画像の一覧を画面端から無限ループするスライドがあります。, 縦のスペースをとらずに多くの写真を見せることができるので、企業のサービスサイトの実績紹介や取引先一覧などで、よく使われているイメージがありますね。, ということで今回は「CSSのみで実装！画面端から無限ループするスライドの作り方」をご紹介します！, 1枚の画像の場合と複数要素の場合の2種類の方法がありますので、それぞれ説明していきます！, 私は食べることが好きなので、pixabayで見つけた食べ物の写真を横並びにしました。, div要素の中に先ほど作った画像を含んだimgタグを入れるのですが、この時必ず２つ入れてください。, 画面幅いっぱいにするためのwidth:100vwと、はみ出した部分を非表示にするoverflow:hiddenを記述します。（隠さないと画像がはみ出しまくります。）, 横移動をさせるので、tranformプロパティのtranslateXの数値を入力していきます。, 下記のコードの「slide1」は1枚目の画像を動かすためのモノ。「slide2」は2枚目の画像を動かすためのモノとなっています。, 作製したアニメーションをに指定します。最初の画像と2枚目の画像でそれぞれ違うアニメーションを適用させましょう。, それでは先ほどのCSSのimgの箇所にanimationプロパティを追記していきましょう。, animation-durationはスライドの時間です。多くすればその分スライドの速度をゆっくりにすることができます。それぞれのアニメーションで同じ数値にしないとずれるので注意。, また、最初のスライドのみanimation-delayにマイナスの数値を入れて、最初だけアニメーション再生位置を途中からにしています。, これを入れないと、何も表示されていない所から画像が入ってくるので空白の時間が生まれてしまいます。, animation-delayの数値はanimation-durationの半分の数値をマイナス値で入れましょう。. これもシ … 画像やロゴを無限ループさせたいという場面は、Webサイトを作っていてもわりと多いです。, 大体の場合はJavaScriptやjQueryのプラグインなどを使用してサクッっと実装してしまうことが多いですが、今回はCSSのみで実装してみたいと思います。. Infinite Loop by NewGorilla (@NewGorilla)