menu

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

【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についての詳細はコチラ(外部サイト)

xd008自動アニメーションでスライドを動かしてみる(Adobe XD)

svgdraw2018SVGドローアニメーション(Adobe Muse CC)

関連記事

  1. animated-text01

    74種類のテキストアニメーションをAdobe Museで表現(A…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。「Animated Te…

  2. animate-sample02

    <HTML5 Canvas>仕様で可能な事を調べています。(その…

    ◎HTML5 CanvasではFlashプラグインを使用せずにインタラクティブコンテンツの表現を…

  3. slides-presentations01

    スライドショーでプレゼンテーション(Adobe Muse CC)…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェット「…

  4. multiscroll01

    左右の画面を逆スクロールで1枚に合成(Adobe Muse CC…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェット「…

  5. dynamic-copyright

    コピーライトの年号を自動で変更(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。コピーライトに年号を使用…

  6. bigmenu03

    フルスクリーンメニューが11種(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  7. scrollpercentage

    スクロールの追跡(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  8. mediapro-gallery

    メディアプロ・ギャラリー(Adobe Muse)

    サードパーティウィジェット「Media Pro Gallery」Widgetを利用することで、ソ…

PAGE TOP