![](https://morisaki.xyz/wp-content/uploads/2018/05/20180527_karusel03.png)
画像カルーセルで2ツのスライドショーを実装する
ELEMENTORのウジェット(要素)の一つ「画像カルーセル」をページに設定すると、一般的には下記の左側のスライドショーが実装されます。この形式のスライドショーは 150×150 pxのサムネイル画像によるスライドショーですが、それを下記の右側のような一般的なスライドショーに変更することが簡単にできます。これも ELEMENTOR の代表的な機能の一つになります。
今回は、そのようは画像カルーセルの編集設定を実践する事例となります。
デフォルト設定で作成されるカルーセル
![pexels-photo-255349](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-255349-150x150.jpg)
![pexels-photo-255339](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-255339-150x150.jpg)
![pexels-photo-247322](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247322-150x150.jpg)
![pexels-photo-247298](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247298-150x150.jpg)
![pexels-photo-247287](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247287-150x150.jpg)
![girl-dandelion-yellow-flowers-160699](https://morisaki.xyz/wp-content/uploads/2018/03/girl-dandelion-yellow-flowers-160699-150x150.jpg)
![girl-flowers-wreath-green-eyes-104843](https://morisaki.xyz/wp-content/uploads/2018/03/girl-flowers-wreath-green-eyes-104843-150x150.jpg)
![pexels-photo-247115](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247115-150x150.jpg)
デフォルト設定で実装される画像カルーセルは、上記の動作をご覧になれば大凡が分かると思います。その動きの概略は、
1.三枚のサムネイル画像が表示されます。
2.その内、2枚の画像単位に横にスライドします。
それが、デフォルトのスライド表示仕様となります。
表示するスライドをデフォルトから’1’に変更することで、右のような良く見慣れたスライドショーに変化します。
表示するスライド=1で作成されるカルーセル
![pexels-photo-255349](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-255349.jpg)
![pexels-photo-255339](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-255339.jpg)
![pexels-photo-247322](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247322.jpg)
![pexels-photo-247298](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247298.jpg)
![pexels-photo-247287](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247287.jpg)
![girl-dandelion-yellow-flowers-160699](https://morisaki.xyz/wp-content/uploads/2018/03/girl-dandelion-yellow-flowers-160699.jpg)
![girl-flowers-wreath-green-eyes-104843](https://morisaki.xyz/wp-content/uploads/2018/03/girl-flowers-wreath-green-eyes-104843.jpg)
![pexels-photo-247115](https://morisaki.xyz/wp-content/uploads/2018/03/pexels-photo-247115-768x512.jpg)
上記左側のスライドショーは以下の設定結果によります。
![](https://morisaki.xyz/wp-content/uploads/2018/05/20180527_karusel01.png)
上記右側のスライドショーは以下の設定結果によります。
![](https://morisaki.xyz/wp-content/uploads/2018/05/20180527_karusel02.png)