Elementorの画像カルーセルウィジェットでくーるくる

Elementor好きのえれくりです。

思いついた時にElementorのウィジェットやWebに関するネタをアップします。

カルーセル(回転木馬)とは、メリーゴーランドや空港のベルトコンベアーなど、くるくると回るものを指し、トップページでよくある画像が横に自動でスクロールしていくスライドショーのことで狭いエリアで複数のコンテンツを表示させることができます。

このウィジェットを使えば、カルーセル表示もあっという間に実装できますっ?

ではいってみましょう?

一般エレメント>画像カルーセル

いつものように「画像カルーセル」ウィジェットを「新しいセクションの追加」へドラッグ&ドロップ。

 

左の「画像の追加」から画像を複数選択します。

スクロールするスライドを2にするとなぜかうまく動かないですね?

 

画像カルーセルのバリエーションサンプル

3個パターンを作ってみました。ご参考までにー?

DEMO

画像カルーセルその1

画像サイズ:Medium-300×300
表示するスライド:デフォルト
スクロールするスライド:3
画像のストレッチ:いいえ
ナビゲーション:矢印とドット
リンク先:なし
見出し:なし

画像カルーセルその2

画像サイズ:Medium-300×300
表示するスライド:デフォルト
スクロールするスライド:3
画像のストレッチ:はい
ナビゲーション:なし
リンク先:なし
見出し:タイトル

画像カルーセルその3

画像サイズ:Medium Large-768×0
表示するスライド:1
画像のストレッチ:はい
ナビゲーション:ドット
リンク先:なし
見出し:なし

追加オプション

スクロールのスピードや向きなども調整できますね。

画像関連でいうとこんなのもありますー?

レスポンシブなLightboxの作り方!画像ギャラリーウィジェット

ではこのあたりで曲いってみましょうEMF / I Believe?

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.