• 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の導入を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. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. WordPress において PHP 8.1 に更新していいかどうか検証
  6. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上
  • メールフォームプラグイン MW WP Form を使いながら WP Rocket を使う場合にエラー回避する設定

カテゴリー

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

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.