ECサイト用パーツ

ランキング（スライド式）

タブレット表示 スマホ表示

パーツ設置費用

15,000円

CSS

.rank__slider__type1 .num {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.0;
	margin: 0 0 10px;
	text-align: center;
}
.rank__slider__type1 figure {
	padding-top: 100%;
	position: relative;
	width: 100%;
}
.rank__slider__type1 figure img {
	image-rendering: -webkit-optimize-contrast;
	object-fit: cover;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: 100%;
}
.rank__slider__type1 .name {
	font-size: 15px;
	line-height: 1.6;
	margin: 10px 0 0;
}
.rank__slider__type1 .swiper-button-next::after,
.rank__slider__type1 .swiper-button-prev::after {
	content: '';
}
.rank__slider__type1 .swiper-button-next,
.rank__slider__type1 .swiper-button-prev {
	background: url("/wp/wp-content/themes/exce/slider/img/slider_arrow-1.png") no-repeat center / cover; /* 矢印アイコン */
	image-rendering: -webkit-optimize-contrast;
}
.rank__slider__type1 .swiper-button-next {
	transform: rotate(180deg);
}
@media screen and (max-width: 800px) {
	.rank__slider__type1 .num {
		font-size: 2.4vw;
		margin: 0 0 1vw;
	}
	.rank__slider__type1 .name {
		font-size: 1.8vw;
		margin: 1vw 0 0;
	}
	.rank__slider__type1 .swiper-button-next,
	.rank__slider__type1 .swiper-button-prev {
		height: 6vw;
		width: 3vw;
	}
}
@media screen and (max-width: 540px) {
	.rank__slider__type1 .num {
		font-size: 4.6vw;
		margin: 0 0 2vw;
	}
	.rank__slider__type1 .name {
		font-size: 3.6vw;
		margin: 2vw 0 0;
	}
}

HTML

<section id="rank__slider__type1" class="rank__slider__type1">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<article>
					<p class="num">No.1</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.2</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.3</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.4</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.5</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.6</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.7</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.8</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.1</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.9</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
			<div class="swiper-slide">
				<article>
					<p class="num">No.10</p>
					<figure>
						<a href=""><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/thumb-dammy-image1.jpg"></a>
					</figure>
					<p class="name"><a href="">てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</a></p>
				</article>
			</div>
		</div>
		<!-- ナビゲーションボタン -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</section>

JavaScript

<script>
var mySwiper = new Swiper ('#rank__slider__type1 .swiper-container', {
	loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。
	speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。
	slidesPerView: 2, // 何枚のスライドを表示するか
	spaceBetween: 10, // スライド間の余白サイズ(ピクセル)
	direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。
	effect: 'slide', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(カバーフロー) または "flip"(平面回転)
	// スライダーの自動再生
	// autoplay: true 　のみなら既定値での自動再生
	autoplay: {
		delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
		stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
		disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
	},
	breakpoints: {
		800: {
			slidesPerView: 5,
			spaceBetween: 20,
		},
		540: {
			slidesPerView: 4,
		}
	},
	// ページネーションを表示する場合
	pagination: {
		el: '.swiper-pagination',　 // ページネーションを表示するセレクタ
	},
	// 前後スライドへのナビゲーションを表示する場合
	navigation: {
		nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
		prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
	},
	// スクロールバーを表示する場合
	scrollbar: {
		el: '.swiper-scrollbar', // スクロールバーを表示するセレクタ
	}
});
</script>

関連パーツ

ランキング　アイコン無し

ランキング（固定表示）アイコン付

ランキング（大）アイコン付

ランキング（スライド式）アイコン付

ランキング表示　アイコン付