サイトを印象的に!スライダー&カルーセル

当社サイトのトップページでも利用していますが、サイトをより印象的に演出するのなら、スライダー&カルーセルの導入がおすすめです。

有限会社リブート-トップページ

当社サイトではブラウザーの幅いっぱいに表示させています。ブラウザーの幅が画像サイズを超える場合は引き延ばされるようになっているので、画像がモヤっとした感じにボケてしまいます。

その他、Wordpressでサイト制作をした場合に下記のようなスライダー&カルーセルを導入することができます。

カフェ・レストランをテーマにサンプルとして作成しています。各画像にはリンクをつけることができ、お好きなページやサイトにユーザーを導くことができます。
画像の切り替えの秒数などもお好みで指定することができます。また、画像の表示順をランダムにすることや画像のナビゲーションのあり・なし、種類を指定できます。

スライダーのサンプル

1.スライドエフェクトのスライダー

ドットナビゲーション付きのサンプル

 

2.フェードエフェクトのスライダー

サムネイルナビゲーション付きのサンプル

 

カルーセルのサンプル

サンプルはループするようになっていますが、最初の画像に戻って停止・最後の画像で停止とカルーセルを止めることもできます。

メイン画像+カルーセル

お店の外観をメイン画像として、その配下にお店の料理のカルーセルを配置することにより、効果的にアピールすることができます。

web-carousel-mainimage01

メイン画像をスライダーにすることもできます。

お問い合わせフォーム