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

公開日: 2013年9月5日
Author: 池田祐太郎
カテゴリー: ホームページ制作
タグ: jQuery, プラグイン

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

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

スライダー完成形

デモサイト

サンプルファイルダウンロード

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

Evo Sliderをダウンロード

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

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

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

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

解説

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

html

<div id="gallerSlider" class="evoslider default"> <!-- start evo slider -->
	<dl>
	
		<dt>slide one</dt>
		<dd data-src="images/gallerySlide00.jpg" data-text="overlay"  data-thumb="images/thumb/gallerySlide00.jpg">
		</dd>
		
		<dt>slide two</dt>
		<dd data-src="images/gallerySlide01.jpg" data-text="overlay"  data-thumb="images/thumb/gallerySlide01.jpg">	        
		</dd>
		
		<dt>slide three</dt>
		<dd data-src="images/gallerySlide02.jpg" data-text="overlay"  data-thumb="images/thumb/gallerySlide02.jpg">
		</dd>
		
		<dt>slide four</dt>
		<dd data-src="images/gallerySlide03.jpg" data-text="overlay"  data-thumb="images/thumb/gallerySlide03.jpg">
		</dd>
		
		<dt>slide five</dt>
		<dd data-src="images/gallerySlide04.jpg" data-text="overlay"  data-thumb="images/thumb/gallerySlide04.jpg">
		</dd>
	
	</dl>
</div> <!-- end evo slider -->

<dl>

<dt>slide one</dt>

</dd>

<dt>slide two</dt>

</dd>

<dt>slide three</dt>

</dd>

<dt>slide four</dt>

</dd>

<dt>slide five</dt>

</dd>

</dl>

</div>

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

CSS

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

    <link rel="Stylesheet" type="text/css" href="css/reset.css" />
    <link rel="Stylesheet" type="text/css" href="css/evoslider.css" />
    <link rel="Stylesheet" type="text/css" href="css/default/default.css" />
    <link rel="Stylesheet" type="text/css" href="css/demo.css" />

JavaScript

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

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.evoslider-2.1.4.js"></script>

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

調整やカスタマイズはパラメーターから可能

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

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

<script type="text/javascript">
            
    var myPlugin = $("#gallerSlider").evoSlider({
        imageScale: "fitImage",
        mode: "slider",
        width: 817,
        height: 400,                
        slideSpace: 5,
        paddingRight: 0,
        titleClockWiseRotation: false,
        hideCurrentTitle: false,
        startIndex: 0,
        showIndex: true,
        mouse: false,
        keyboard: true,
        speed: 500,
        easing: "swing",
        loop: true,
        lazyLoad: false,
        autoplay: false,
        interval: 5000,
        pauseOnHover: false,
        pauseOnClick: false,
        showPlayButton: false,
        playButtonAutoHide: false,
        toggleIcon: true,            
        directionNav: false,
        directionNavAutoHide: false,
        showDirectionText: false,
        nextText: "Next",
        prevText: "Prev",
        controlNav: true,
        controlNavMode: "thumbnails",
        controlNavVertical: true,
        controlNavPosition: "outside",
        controlNavVerticalAlign: "right",
        controlSpace: 5,
        controlNavAutoHide: false                
    });                                
    
</script>

var myPlugin = $("#gallerSlider").evoSlider({

imageScale: "fitImage",

mode: "slider",

width: 817,

height: 400,

slideSpace: 5,

paddingRight: 0,

titleClockWiseRotation: false,

hideCurrentTitle: false,

startIndex: 0,

showIndex: true,

mouse: false,

keyboard: true,

speed: 500,

easing: "swing",

loop: true,

lazyLoad: false,

autoplay: false,

interval: 5000,

pauseOnHover: false,

pauseOnClick: false,

showPlayButton: false,

playButtonAutoHide: false,

toggleIcon: true,

directionNav: false,

directionNavAutoHide: false,

showDirectionText: false,

nextText: "Next",

prevText: "Prev",

controlNav: true,

controlNavMode: "thumbnails",

controlNavVertical: true,

controlNavPosition: "outside",

controlNavVerticalAlign: "right",

controlSpace: 5,

controlNavAutoHide: false

});

</script>

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

デモ、ファイル

デモサイト

サンプルファイルダウンロード

こんな記事も読まれています

この記事を書いた人

池田祐太郎

WordPress好きの池田です。Webの仕事の前はライブハウスでブッキングや音響をしてました。PHP, JavaScriptを自由に操りたいと思いつつ、つい訪れたサイトのソースコードを見てしまいます。

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

スライダー完成形

Evo Sliderをダウンロード

解説

html

CSS

JavaScript

調整やカスタマイズはパラメーターから可能

デモ、ファイル

こんな記事も読まれています

この記事を書いた人

池田祐太郎

CONTACTお問い合わせ / お見積もり