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. musexpress2_0-10

    MuseとWordPressの連携(その7/Adobe Muse…

    Adobe MuseとWordPressを連携させたサイトの制作に挑戦。「MusexPres…

  2. fullscreen-slideshow-cover01

    Webサイト全体をフルスクリーンスライドショーで魅せる(Adob…

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

  3. animateall

    最大3つまでの連続アニメーション(Adobe Muse)

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

  4. slanted-panels-01

    斜めのラインとスクロール効果を使う流行のデザインも簡単に表現可能…

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

  5. muse-Introduction2-5

    Adobe Muse CCならブラウザ上から更新可能。 (Ado…

    Adobe Muse CCならブラウザ上から更新可能。 (Adobe Muse) from ya…

  6. absolute-muse-gallery

    グリッドギャラリー(Adobe Muse)

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

  7. muse-samplesite01-01

    Adobe Museでレスポンシブ対応サンプルサイト01(Ado…

    Adobe Muse CCを利用して、レスポンシブ対応のサンプルサイトを制作しました。※ページ内…

  8. kishioka-design_sample001_01

    サンプルブログ001の制作(MusexPress3.x)

    ※2017年6月8日ブレークポイントを追加してのレスポンシブ対応を試みたのですがエラー発生。…

Adobe Muse

Adobe Museならスピードアップ&コストダウン

My Portfolio

kishioka-design.myportfolio.com
PAGE TOP