[デモ有り]Evo Sliderを使った縦スライドショーのチュートリアル

有名なjQueryスライダーのEvo Slider。
ダウンロードサイトは全面英語なので、初めての方でもわかりやすいように説明したチュートリアルです。

無料or有料と分かれていますが、これは$12のProプラン。
使える機能が格段に違うので、無料でできればいいですが、Evo Sliderの縦スクロールは$12のproプランからのサポートのようです。
今回はこれをサイトに組み込む方法をご紹介します。

スライダー完成形

上記のようなサムネイルを縦にし、メインのスライダーがふわっと切り替わるような縦スライドショーです。
ではいってみましょう。

公式サイトからダウンロードページへ進み、「Buy $12」をクリック。
codecanyonのサイト内でユーザー登録、購入の手続きを済ますとダウンロード可能になります。

Downloadボタンを押し「All files & Documentation」をクリックするとzipファイルでダウンロードができます。
解凍するといくつかhtmlファイルがあるので開いてみましょう。

試しにscroller.htmlを開いてみました。

何の変哲もない、普通の横スライドショー。
これをコントロール兼縦サムネイルの縦スクロールにしてメインの横に置きましょう。

スライドショー部分は以下のとおりです。

 
	
	
		slide one
		
		
		
		slide two
			        
		
		
		slide three
		
		
		
		slide four
		
		
		
		slide five

<dd>の中身でメイン画像とサムネイル画像を指定しています。
今気づいたんですが、date-text=”overlay”はテキストを上にかぶせるときに使います。このデモにはないですね。。。

もともとあるEvo SliderのCSSを読み込みます。

こちらも同じく読み込むのみ。

あとは画像など適宜用意します。

Evo Sliderのいいところはそこまで知識がなくてもパラメーターをいじるだけでカスタマイズができる点です。

今回は以下のように設定しましたが、ここを公式ドキュメントを見ながらいじるだけでもいろいろできます。

以上、Evo Sliderを使った縦スライドショーでした。