• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作 / [デモ有り]Evo Sliderを使った縦スライドショーのチュートリアル

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

池田祐太郎 | 2013年9月5日 公開

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

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

目次

  • 1 スライダー完成形
  • 2 Evo Sliderをダウンロード
  • 3 解説
    • 3.1 html
    • 3.2 CSS
    • 3.3 JavaScript
  • 4 調整やカスタマイズはパラメーターから可能
  • 5 デモ、ファイル

スライダー完成形

jQuery_Evo_Slider_Vertical_tutorial__縦スクロールスライダーデモ

デモサイト

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

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

Evo Sliderをダウンロード

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

Downloads___CodeCanyon

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

ダウンロード

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

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

解説

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

html

slide one
slide two
slide three
slide four
slide five

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

CSS

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

    
    
    
    

JavaScript

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

    
    
            

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

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

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

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


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

デモ、ファイル

デモサイト

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

メールコンサルティング
WordPress保守管理サービス

Filed Under: ホームページ制作 関連タグ:jQuery, プラグイン

池田祐太郎

WordPressの導入を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在はWordPressの保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

ブロックエディタを拡張するSnow Monkey Editorプラグインはコーポレート+ブログに適切
2022年4月28日
タグ: プラグイン
カテゴリー: WordPress
WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース
2022年3月9日
タグ: Webサイト高速化, プラグイン
カテゴリー: WordPress
これからはbxSliderを使わずに別のスライダーライブラリを使おう
2022年1月13日
タグ: bxslider, jQuery, Swiper
カテゴリー: WordPress

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  3. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  4. コラム:class名とid名はどうやってつければいい?
  5. 【2022年最新】WooCommerceで作られた国内ECサイト一覧まとめ
  6. Elementorで表を作る3つの方法

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • ブラウザ戦争の一区切り。Internet Explorer のサポート終了で思うこと
  • エクセルを使って顧客データから任意の条件に合う顧客を抽出する方法
  • 2022年以降WordPressのテーマを選ぶ際にこれだけは注意しておきたいポイント
  • ブロックエディタを拡張するSnow Monkey Editorプラグインはコーポレート+ブログに適切
  • 2022年に実施される小規模事業者持続化補助金をサイト制作やオンライン広告に使うための注意点

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor google workspace Gutenberg HTML IE10 iOS iPhone jQuery Mac Photoshop初心者 php SEO SNS Sublime Text Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket お知らせ アクセス解析 アプリ カフェ クラウド クラウドソーシング サブスクリプション サーバー スマホサイト スマートフォン ソーシャル ツール ブログ プラグイン マーケティング リニューアル 保守管理 効率化 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2022 high five create All rights reserved.