jQueryのコピペでできる縦にスクロールするスライダー・カルーセルのスニペット

縦のスライダーのイラスト

スライダー・カルーセルは便利なUIで、CSSやjQueryで簡単に実装でき、限られたスペースに近しいコンテンツを多数出そうと思った場合に重宝します。

かかかず
かかかず

自分もマルチページのサイトの場合、どっかしらに使うことが多いです。

ちなみに、俗に言うスライダーは、カルーセルと同義でどっちの言葉でもOKで、仕様に違いはありません。この辺の言葉のニュアンス的な詳細が気になる方は、以下記事にまとめたので、こちらの記事も合わせてご覧ください。

関連記事 カルーセルの基本的な使い方とデザイン

と、話が逸れましたが、横スライダーはよく見かけますが、縦型のスライダーはあんまりないので、そのスニペットのご紹介です。

縦のスライダー・カルーセルのサンプル

早速ですが、縦のスライダー・カルーセルのサンプルです。右に切り替え用のポインタを設置して、ポインタを選択すると上下に画像が切り替えになる仕様です。

知りたいことはこちらで検索

知りたいことはこちらで検索

コピペの手順

コピペするコードは3つで、HTML・CSS・jQueryです。以下に手順を記載してみましたが、順番は入れ違っても問題ありませんが、3つともコピペするようにしましょう。

かかかず
かかかず

手順、いらなかったかもしれませんが念の為。

jQueryを入れる

このコードでをコピペする前に、jQueryのファイルが必要です。コピペ用コード一式を貼り付けする前に、以下の「 jQueryを入れましょう」を参考にして、設定をしておきましょう。

HTMLをコピペ

jQueryのコピペ用コード一式の中の「HTML」のコードを、表示させたい位置にコピペします

CSSをコピペ

CSSを、ページで使用しているstyle.cssの外部ファイルか、</head>の前のどこかに、<style type="text/css">〜</style>の中にコピペします。

jQueryをコピペ

最後にjQueryを、</body>のクロージングタグ直前にコピペしましょう。外部ファイルでこのjQueryを読まない場合、<script>〜</script>で囲ってコピペすればOKです。

jQueryを入れましょう

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO
このコピペの実装サンプルは、以下のjQueryを使用しています。
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' id='jquery-js'></script>
上記のような記述が、htmlファイルの
<head></head>
の中に無い場合、その中へ貼り付けましょう。

コピペ用コード一式

コピペ用のコード一式です。

スライダーで切り替えの画像と背景は、HTMLではなくCSSの.slide のclassで画像のurl指定をするので、それぞれ好みのものに切り替えて使ってください。

かかかず
かかかず

CSSが多めですが、コピペだけでOKです。

コードを表示する

HTML

			<div class="wrapper">
				<div class="container">
					<div class="slideDiv">
						<article class="slide active"></article>
						<article class="slide"><div class="slideinner2"><p>知りたいことはこちらで検索</p></div></article>
						<article class="slide"></article>
						<article class="slide"><div class="slideinner2"><p>知りたいことはこちらで検索</p></div></article>
					</div><!-- /slideDiv -->
				<nav class="controls">
				  <button class="button selected" type="button" aria-label="Go to first image"></button>
				  <button class="button" type="button" aria-label="Go to second image"></button>
				  <button class="button" type="button" aria-label="Go to third image"></button>
				  <button class="button" type="button" aria-label="Go to fourth image"></button>
				</nav>
				</div><!-- /container -->
			</div><!-- /wrapper -->

CSS

/* Vertical Slider */
.wrapper {
    word-wrap: break-word;
    width: 100%;
    padding: 0;
    background: url(https://dubdesign.net/domain/wp-content/uploads/2021/04/fv_bg-5.svg);
    display: inline-block;
}
.wrapper,
.container {
  margin: 0 auto;
}

.container {
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    max-width: 62.5rem;
    height: 35.1875rem;
    line-height: 0;
}

.slideDiv,
.controls {
  position: absolute;
}

.slideDiv,
.slide {
  width: 100%;
  height: 100%;
}
.slideDiv .slide .slideinner,.slideDiv .slide .slideinner2, .slideDiv .slide .slideinner3, .slideDiv .slide .slideinner4 {
    position: relative;
    margin: auto;
    top: 50%;
    left: 50%;
    display: inline-block;
    transform: translateY(-50%) translateX(-27%) scale(0.8);
}
.slideDiv .slide .slideinner2 {
    top: 45%;
}
.slide {
  background-size: cover;
}
.slideinner p {
    text-align: center;
    display: block;
    padding: 0 20px;
    height: 30px;
    margin: 0 auto;
}
.slideinner p:before, .slideinner p:after {
    content: "/";
    padding: 0 15px;
}
.slideinner p:before {
    content: "\";
}

.slide:first-child {
  background: url(https://dubdesign.net/domain/wp-content/uploads/2021/04/fv_topimg-4.svg) no-repeat center;
}

.slide:nth-of-type(2) {
  background: url(https://dubdesign.net/domain/wp-content/uploads/2021/04/fv_002-4.svg) no-repeat center;
}

.slide:nth-of-type(3) {
  background: url(https://dubdesign.net/domain/wp-content/uploads/2021/04/fv_topimg002.svg) no-repeat center;
}

.slide:last-child {
  background: url(https://dubdesign.net/domain/wp-content/uploads/2021/04/fv_topimg004.svg) no-repeat center;
}

.controls {
  top: 41%;
  right: 0;
  padding: 0 0.63rem;
  z-index: -5%;
  text-align: center;
  position:absolute;
}

.button { 
  width: 18px;
  height: 18px;
  display: block;
  cursor: pointer;
  border-radius: 50%;
  transition: all ease .2s;
}

.button:not(:last-child) {
  margin-bottom: 0.63rem;
}


/***Colors***/

.button {
  border: 1px solid #fff;
  opacity: .6;
  outline: none;
  background-color: #333;
}

.button:hover,
.button:focus {
  opacity: 1;
}

.selected {
  background-color: #6bb6ff;
  filter: drop-shadow(0px 0px 2px #aaa);
	 transform: scale(1.4);
}
.slideinner2 input.searchform__input {
    padding-right: 100px;
}
.slideinner2 p {
    text-align: center;
    position: relative;
    background: #c8e4ff;
    height: 45px;
    line-height: 43px;
    color: #555;
    font-size: 0.9rem;
    font-weight: 600;
    margin: auto 40px 26px;
    border-radius: 50px;
	  padding: 0 30px;
}
.slideinner2 p:before {
    content: "";
    position: absolute;
    top: 88%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #c8e4ff;
}

.header-info.animated {
    position: relative;
    z-index: 1;
}
.header-info.animated a p {
    margin: 0;
}
.header-info.animated a p:after {
    content: url(https://dubdesign.net/domain/wp-content/uploads/2021/04/otherlink-1.svg);
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    vertical-align: sub;
    margin-left: 5px;
}

jQuery

(function() {
    
  function controls() {
    $(this).addClass('selected').siblings('button').removeClass('selected');
    $('.slideDiv').animate({
      top: -$('.container').height() * $(this).index()
    }, 450);
  }
  
  /***Event Listeners***/
  const runCode = () => {
    const button = document.querySelectorAll('.button');
    if ( button ) {
      for ( var i = 0; i < button.length; i++ ) {
        button[i].addEventListener('click', controls, false);
      }
    }
  }
  
  runCode();
  
})();

さいごに

縦のスライダー・カルーセルは、横のスライダーが使えない場合。例えば、2カラムの右側に通常の横スライダーを置こうと思った場合、カラム同士の余白がなく窮屈な状態で使うなど、バリエーションとして持っておくと有効だと思います。

ちなみに横のスライダーは、jQueryのslickが簡単にカスタマイズもできるので非常に使いやすいjQueryライブラリです。

以下の記事に使い方などご紹介しているので気になった方はチェックしてみてください。

関連記事 jQueryライブラリの定番、slickのコピペでできるスライダー・カルーセル