●JQueryを使ったスライダー(AmazingSlider編)

 
既存のページにスライダーを挿入するはこちら>>>
●Amazing Sliderのロゴの付かないソフトでスライダーページを作る

Amazing Sliderの使い方です。
いろいろな動きができます。
サンプルは、
jQuery & WordPressスライダー例
で見てください。

右下にAmazingSlider.comのウォーターマーク(文字)が付きますが、これは、画像を追加するとその大きさに切り取ってくれますから、ソースの改変ができる人は、この画像を無料のスクリプトに差し替えて使ってもいいと思います。

切り抜いた写真をピカサなどの画像編集ソフトでモノトーンやセピアな細工をしてもいいかもしれません。

640×480の写真を使ったんですが、もっと大きい方がトップページにはいいかも。
■amazingslider(アメイジングスライダー)
画像の挿入
 サイズを決めて、「画像追加」をクリックします。
  真ん中で切っちゃうようなので人物などは予めトリミングしておいた方がいいです。
画像をまとめて追加
複数の写真を選択 コントロールキーを押しながらまとめて選択もできます。
スキン(外観)の見本。
実際の動きは
jQuery & WordPressスライダー例
で確認してみてください。
写真のキャプション・説明をつける。
 写真を読み込んだら、「タイトル」のところに写真や画像のキャプションや説明、キャッチコピーなどをいれます。
スキン見本2
 「①スキン選択」でどれか選んで②スキンカスタマイズ(オプション)で確認しながら変更します。
  オプションなのでそのままでもOKです。
画像の切り替え方を選びます
 写真が入れ替わる時のスタイルをいれます。
 戻って確認できます。


  一番上のやつが「3D水平」です。
オプション
 画像が変わる時間などを入れます。数字が大きい方が長くなります。
  ずっと動かすのが「永久ループ」。一度だけにもできます。
プロジェクトの公開
 日本語のフォルダ名だとダメなようです。
  1ページ複数のスライダーを入れる場合は、スライダーIDを違うものにします。
  ※数字を増やす。

  これでスライダーだけのページができます。

■スライダーの入ったページのアップロード

スライダーをアップロードするフォルダー

「images」と「sliderengine」というフォルダをスライダーのページと同じ場所にアップロードします。

初期設定のままだと、slider.htmlがスライダーの入ったホームページ。
ファイル名(左ではtest).amsliderというファイルが再編集したりするファイルです。
※編集ページ(名前.amslider)はアップロードの必要はありません。

  あとはホームページ作成ソフトでタイトルや文字など他の部分を作っていきます。

既存のページにスライダーを挿入する>>>
●ウォーターマーク(ロゴ)の付かないソフトでスライダーページを作る

もどる