カルーセル画像スライダ2.0(Adobe Muse CC)

SERVICE

【Adobe Muse】の機能を利用したコンテンツを紹介しています。
サードパーティウィジェット「Carousel Image Slider 2.0」Widgetを利用すると、
最大10点のスライドショーの演出が可能になります。

▽サンプル01
live-preview

▽サンプル02
live-preview

▽サンプル03
live-preview

▽サンプル04
live-preview

▽サンプル05
live-preview

■セットアップの方法

○ウィジェットの配置

ウィジェットをライブラリからドラッグし、デザインモードでプロジェクトにドロップします。
ウィジェットをブラウザのページに表示するデザインモードに配置します。フルサイズのスライダの場合は、「サイズ変更」メニューの「ブラウザ幅に拡大」を選択します。

○イメージの準備

写真エディタで画像の高さとアスペクト比が同じになるように画像を準備することをお勧めします。異なるアスペクト比とサイズが機能しますが、スライダに均一に表示されると、異なるサイズの画像が切り取られます。
スライダで使用する画像を決めます。最小画像幅は1000pxをお勧めします。

▷Carousel Height:この設定は、スライダの固定高さを設定します。
スライダの幅を調整するには、単にウィジェットコンテナのサイズを変更します。スライダの高さは常にウィジェットオプションに設定され、幅はウィジェットコンテナで設定されることに注意してください。

▷Slides Per View:スライダで一度に表示される画像の数を設定します。奇数と偶数の画像を扱うだけでなく、古典的な「カルーセルの外観」を作成する方法については、下の「画像のアスペクト比の管理」を参照してください。
トランジション方向:スライダを右から左(水平)と下から上(垂直)に切り替えることができます。

○画像セクション

このセクションでは、画像の読み込み、キャプションテキストの設定、リンクの有効化と定義を行うことができます。

○スタイリングセクション

このセクションには、スライダの広範なスタイリングオプションが含まれています。

▷中央のスライドを有効にする:
この設定は、偶数のスライドを持ちながら、スライドを中央に配置したい場合に便利です。奇数のスライドが表示されているスライダは、常に中央のスライドを持ちます。クラシックの “カルーセルスライダ”の外観を作成する場合は、[スライドの表示単位]を2に設定し、中央のスライドを有効にします。

▷非アクティブなスライドのキャプションを隠す:
この設定は、[ 中央のスライドを有効にする]設定がオンの場合にのみ表示されます。これにより、中央スライドの左右にスライドのキャプションが表示されなくなります。この設定を有効にしないと、キャプションが部分的にしか見えないスライドにキャプションが表示され、キャプションが途切れたり、混乱を招く可能性があります。

▷自動再生を有効にする:
この設定では、前/次の矢印をクリックせずにスライドショーを再生できます。

▷ループモードを有効にする:
最後にスライドショーをループできます。
グラブを有効にする:これにより、モバイルデバイスやタブレットデバイスに表示されるタッチUIと同様に、カーソルをクリックしてドラッグすることでスライドを進めることができます。

▷Hide Arrows:
これは、前/次の矢印を非表示にします。

▷ページネーションを有効にする:
この設定では、ページ区切りドットの表示が有効になります。

▷ページネーションナビゲーションを有効にする:
これにより、ページ分割ドットをクリックしてスライドショーをナビゲートすることができます。
画像アスペクト比 の管理スライダ内の画像の形状は、スライダの幅、スライダの高さ、閲覧ブラウザ(ビューポート)の幅、および画像の数の要素の影響を受けます。

▷「Carousel Image Slider 2.0」Widgetについての詳細はコチラ(外部サイト)

kishioka yasuo

kishioka yasuo

ホームページの企画・制作・運営・管理を主業務とする岸岡デザイン事務所のブログです。

関連記事

最近の記事

ランキング

  1. 1

    パラパラと文字が上から落ちてくるモーショングラフィックス(After Effects)

  2. 2

    黒板にチョークで書いたような文字とイラストのアニメーション

  3. 3

    映像にシェイク効果を簡単に(Premiere Pro/Motion Array)

  4. 4

    テキストを3D表現で回転するアニメーションを作成(After Effects)

  5. 5

    マスクパスを【エフェクト/電波】でアニメーションさせる(After Effects)

最近の記事

  1. 筆の筆跡イメージを使って写真を簡単にマスクする方法(Affnity Photo)

  2. 文字を透明に切り抜く方法【Affinity Photo】

  3. Filmoraにお任せで編集してもらえるハイライト自動検出機能【Filmora X】

  4. パスに沿ってテキストを配置する方法【Affinity Photo】

  5. パターンレイヤーを使って簡単に背景を作る方法(Affnity Photo)

動画パーツの制作・販売

After Effects、Premiere Proによる動画パーツの制作・販売/YOUTUBE-STUDIO

グラフィックパーツの制作・販売

Photoshop、Illustrator等によるグラフィックパーツの制作・販売/Kishioka Graphic Studio

STUDIOで制作するWEBサイト

時短で低価格の本格的なホームページを『STUDIO』で制作

オリジナル雑貨をminne/BASEで販売

オリジナル雑貨をminne/BASEで販売中。/Zakka2251
kishioka yasuo

kishioka yasuo

ホームページの企画・制作・運営・管理を主業務とする岸岡デザイン事務所のブログです。

TOP