デモページはこちら

swiper.jsのオプションdirectionにverticalを指定して、縦方向のスライダーを実装します。htmlのコードは以下の通りです。

<div class="container">
	<div class="swiper-container c-slider-container js-slider">
		<ul class="swiper-wrapper">
			<li class="swiper-slide c-slider-item">
				<figure class="c-slider-item-photo">
					<span class="c-photo-bg" style="background-image:url(images/swiper01.jpg)"></span>
				</figure>
			</li>
			<li class="swiper-slide c-slider-item">
				<figure class="c-slider-item-photo">
					<span class="c-photo-bg" style="background-image:url(images/swiper02.jpg)"></span>
				</figure>
			</li>
			<li class="swiper-slide c-slider-item">
				<figure class="c-slider-item-photo">
					<span class="c-photo-bg" style="background-image:url(images/swiper03.jpg)"></span>
				</figure>
			</li>
			<li class="swiper-slide c-slider-item">
				<figure class="c-slider-item-photo">
					<span class="c-photo-bg" style="background-image:url(images/swiper04.jpg)"></span>
				</figure>
			</li>
			<li class="swiper-slide c-slider-item">
				<figure class="c-slider-item-photo">
					<span class="c-photo-bg" style="background-image:url(images/swiper05.jpg)"></span>
				</figure>
			</li>
		</ul>
	</div>
</div>

CSSのコードです。swiperで縦方向のスライダーを実装する場合、クラス名swiper-containerのdivタグにheightの指定は必須です。クラス名swiper-slide-activeは、クラス名swiper-slideのliタグの中でアクティブなスライドに付与されます。

.container {
	width: 300px;
	height: 400px;
	margin: 0 auto;
}
.c-slider-container {
	height: 100%;
}
.c-slider-item {
	cursor: pointer;
}
.c-slider-item-photo {
	display: block;
}
.c-slider-item-photo:before {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Parisienne', cursive;
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 0;
	color: #fff;
	word-break: break-all;
	content: attr(data-index);
}
.swiper-slide-active .c-slider-item-photo:before {
	color: #573807;
}
.c-slider-item-photo:after {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(87, 56, 7, 0.5);
	content: '';
	transition: background 1s cubic-bezier(0.175, 0.885, 0.32, 1);
}
.swiper-slide-active .c-slider-item-photo:after {
	background: rgba(255, 255, 255, 0.4);
}
@media screen and (min-width: 1199px) {
	.c-slider-item-photo:hover:after {
		background: rgba(255, 255, 255, 0.4);
	}
}
.c-photo-bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-position: center;
	background-size: cover;
}

スライド上の連番はjQueryで実装しています。カスタムデータ属性data-indexに連番を設定して、CSSの疑似要素で表示しています。
swiperはオプションでdirection: 'vertical'を指定して縦方向のスクロールにします。初期値は横方向の'horizontal'です。またコントローラーは設定せず、slideToClickedSlide: trueを指定してクリックでアクティブなスライドを切り替えます。

var slider_count = 0;
$('.c-slider-item').each(function(){
	slider_count++;
	if(slider_count < 10){
		$(this).find('.c-slider-item-photo').attr('data-index','0' + slider_count);
	}else{
		$(this).find('.c-slider-item-photo').attr('data-index',slider_count);
	}
});

var swiper01 = new Swiper('.js-slider', {
	loop: true,
	direction: 'vertical',
	slidesPerView: 2,
	spaceBetween: 10,
	allowTouchMove: false,
	slideToClickedSlide: true,
});