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

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

かかかず

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

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

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

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

縦のスライダー・カルーセルのサンプル
コピペの手順
- jQueryを入れましょう
コピペ用コード一式
さいごに

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

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

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

コピペの手順

コピペするコードは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();
  
})();