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

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作 / 縦スクロールのjQueryスライドショー12選

縦スクロールのjQueryスライドショー12選

池田祐太郎 | 2013年6月24日 公開

縦スクロールの画像スライダーを探す機会がありましたので、備忘もかねてご紹介します。なかなかないんですよね、縦にスクロールするプラグインって…

大体デモサイトにリンクしています。一応有料のものは有料と記しましたが、詳しい利用方法は配布先にて再度確認をしてください。

目次

  • 1 EVO SLIDER
  • 2 WOW Slider
  • 3 bxslider
  • 4 FlexSlider 2
  • 5 縦カルーセルパネル透かしスライドショーギャラリーをHPに貼り付けるcp_2306
  • 6 Magic Scroller
  • 7 ELASTISLIDE
  • 8 jContent
  • 9 jQuery Vertical Slideshow
  • 10 Amazing Slider 垂直回転式jQueryスライダー
  • 11 jCarousel
  • 12 Tiny Carousel

EVO SLIDER

EVO SLIDER
http://evoslider.com/demo3.html
無料と有料のパターン有り。商用利用は有料。
商用版はわりと細かいオプションがあり、かゆいところに手がとどくプラグインです。Version2.1.3でIEの等倍表示が可能になりますます使いやすくなり個人的に気に入っています。

【2013/09/05 追記】
Evo Sliderを実装するサンプルファイル付きチュートリアルを公開しました。
[デモ有り]Evo Sliderを使った縦スライドショーのチュートリアル

WOW Slider

WOW Slider
http://wowslider.com/ja/online-photo-slideshow-balance-blast.html
縦に動くスライダー。マウスを乗っけるとサムネイルが動く

bxslider

bxslider
http://bxslider.com/
縦に動くがサムネイルも同時にできるかは未検証
レスポンシブ対応なので使える幅は広がりそうですね。

FlexSlider 2

FlexSlider 2
http://flexslider.woothemes.com/
※オプションの「slideDirection: “vertical”」 で縦スクロールにできる
有名どころです。デモは縦移動ありませんが、オプション指定で縦スクロールに。

縦カルーセルパネル透かしスライドショーギャラリーをHPに貼り付けるcp_2306

cp_2306
http://www.geocities.jp/miyake_kobo/cp_ez/cp_2306.html
※有料?(¥2000)
【2013/07/08 追記】
使いました。¥2000の有料ですが、無料で動作確認ができます。

Magic Scroller

Magic Scroller
http://www.edmundoretama.com/magicscroller/
複数の画像がまとまって縦に切り替わるスライダー

ELASTISLIDE

ELASTISLIDE
http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
メイン画像は表示されない縦スクロール

jContent

jContent
http://do-web.com/jcontent/demo
コンテンツ自体を縦スライドさせることが可能

jQuery Vertical Slideshow

jQuery Vertical Slideshow
http://www.htmldrive.net/items/demo/559/jQuery-Vertical-Slideshow
個数が決まっているテキスト要素の縦スライダー

Amazing Slider 垂直回転式jQueryスライダー

Amazing Slider
http://amazingslider.com/ja/examples-ja/jquery-slider-with-vertical-carousel-ja/
機能はクリア。但し商用利用有料。

jCarousel

jCarousel
http://sorgalla.com/projects/jcarousel/examples/static_vertical.html
縦スクロールだがメイン画像は出ない

Tiny Carousel

Tiny Carousel
http://www.baijs.nl/tinycarousel/
サムネイル無し

 

以上、jQueryスライドショー12選でした。
他にも見つかれば随時追加していきます。

jQueryを学び始めた当初はこの本にとても助けられました。手元にあると何かと役に立つ一冊。

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践

WordPress保守管理サービス

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

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

7.デベロッパーツール応用編
2014年3月4日
タグ: css, HTML, jQuery
カテゴリー: デベロッパーツール入門
WordPressでプラグインが動作しない時の対処法
2013年11月15日
タグ: WordPress, プラグイン
カテゴリー: TIPS
要素を遅らせて表示させるjQueryのサンプル
2013年11月9日
タグ: jQuery
カテゴリー: TIPS

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPressの保守が必要な理由とチェックするべき9点
  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法

カテゴリー

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

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

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

© 2021 high five create All rights reserved.