Studioの自動カルーセルで無限ループを作る方法を徹底解説！

「Studioで自動カルーセルを使いたい」「自分で設定すると止まったりカクついてしまう」

そんな悩みを持つ方も多いのではないでしょうか。

この記事では、Studioのカルーセルを使った無限ループの作り方を解説していきます。

Studioのカルーセルで無限ループを作る方法

Studioのカルーセルとは？

Studioのカルーセルとは、複数の画像や動画を順番に表示する機能です。

自動再生やホバーによる停止のオンオフ、再生間隔や送り時間を設定することができます。

カルーセルを使用することで、Webサイトやランディングページに動きを加え、ユーザーの視線を惹きつけたり、情報を分かりやすく伝えたりするのに役立ちます。

参考：Studioの制作代行を利用する際の流れや費用とは？

Studioのカルーセルで作る無限ループ

Studioで無限ループを実現するには、カルーセルに対していくつかの設定を行う必要があります。

いくつかのポイントを押さえることで、以下のようなカルーセルを使った無限ループを実装することができます。

カルーセルで無限ループを作る手順

カルーセルを使って無限ループを作る手順は以下の通りです。

1. カルーセルの配置
2. 画像の調整
3. カルーセルの設定
4. イージングの設定

1.カルーセルの配置

まずはカルーセルをページに配置しましょう。

カルーセルは左パネルから「ボックス」→「Component Parts」を選びましょう。

デフォルトのカルーセルは横幅が100%となっているのでお好みで画像サイズを変更すると良いでしょう。

2.画像の調整

次に、カルー調整に表示する画像を調整します。

今回は横300px、縦200px、画像もいくつか変更してみました。

画像は％でも構わないので、お好みで調整してください。

3.カルーセルの設定

画像の設定が終わったら、カルーセルの設定を行います。

デザインエディタの右側にあるパネルを開いて、数字を設定します。

無限ループを作るには、自動再生をオン、再生間隔を1にする必要があります。

また、送り間隔というのはカルーセルがスライドする時間を指しており、3000の場合は3秒となります。

4.イージングの設定

最後に、カルーセルの動きを滑らかにするためにイージングを設定します。

無限ループを作るにはイージングを直線にする必要があります。

ここでイージングを直角にしていないと無限ループの際に動作がカクつきます。

Studioで無限ループを作る際のポイントと注意点

再生間隔を1にする

無限ループを実現するために、再生間隔は1に設定する必要があります。

再生間隔を1に設定することで、画像をスライドさせることが可能になります。

イージングを直線にする

イージングを設定することで、要素の動きに変化を持たせることができます。

滑らかな無限ループを作る場合は、必ずイージングを直線のものに設定しましょう。

イージングを直線にしていない場合、カクつきのある無限ループとなってしまうので注意が必要です。

公式では無限ループをサポートしていないため注意が必要

ここまで無限ループの作り方を解説してきましたが、Studio公式ではカルーセルを使った無限ループをサポートしていません。

Studioの標準機能でカルーセルを作る場合、一番後ろから登場する画像の表示が遅いことがサポートしていないという主な理由です。

あくまでもカルーセルの仕様を理解したうえで実装するか、コーディングを用いて実装する必要があるでしょう。

参考：カルーセルの自動再生機能で、要素の無限ループ再生はできますか？

まとめ

この記事では、Studioのカルーセルを使って無限ループを作る方法を解説しました。

ノクステックは、StudioExpertsに加盟しているため、高品質なWebサイトをご提供いたします。

また、Studioについてその他にも気になる点がある方は「Studioリファレンス」もご覧ください。