スライダー（バナー5点）

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

ルール・連絡事項

左右の矢印アイコンは変更できる

パーツ設置費用

55,000円

費用メモ

バナー増減の場合　1点10,000円で計算する

CSS

.slider__type1 {
	overflow: hidden;
	padding-bottom: 40px;
	position: relative;
}
.slider__type1 .swiper-button-next::after,
.slider__type1 .swiper-button-prev::after {
	content: '';
}
.slider__type1 .swiper-button-next,
.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;
}
.slider__type1 .swiper-button-next {
	transform: rotate(180deg);
}
.slider__type1 .swiper-pagination {
	bottom: 0;
	width: 100%;
}
.slider__type1 .swiper-pagination-bullet {
	margin: 0 5px;
	height: 12px;
	width: 12px;
}
.slider__type1 .swiper-pagination-bullet-active {
	background: #666;
}
@media screen and (max-width: 800px) {
	.slider__type1 {
		padding-bottom: 4vw;
	}
	.slider__type1 .swiper-button-next,
	.slider__type1 .swiper-button-prev {
		height: 6vw;
		width: 3vw;
	}
	.slider__type1 .swiper-pagination-bullet {
		margin: 0 .8vw;
		height: 10px;
		width: 10px;
	}
}
@media screen and (max-width: 540px) {
	.slider__type1 {
		padding-bottom: 6vw;
	}
	.slider__type1 .swiper-button-next,
	.slider__type1 .swiper-button-prev {
		top: 55%;
		height: 6vw;
		width: 3vw;
	}
	.slider__type1 .swiper-pagination-bullet {
		margin: 0 1vw;
		height: 8px;
		width: 8px;
	}
}

HTML

<section id="slider__type1" class="slider__type1">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg"></div>
			<div class="swiper-slide"><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg"></div>
			<div class="swiper-slide"><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg"></div>
			<div class="swiper-slide"><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg"></div>
			<div class="swiper-slide"><img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg"></div>
		</div>
		<!-- ナビゲーションボタン -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
	<!-- ページネーション --><div class="swiper-pagination"></div>
</section>

JavaScript

<script>
var mySwiper = new Swiper ('#slider__type1 .swiper-container', {
	loop: true, // 最後のスライドまで到達した場合、最初に戻らずに続けてスライド可能にするか。
	speed: 600, // スライドが切り替わるトランジション時間(ミリ秒)。
	slidesPerView: 1, // 何枚のスライドを表示するか
	spaceBetween: 10, // スライド間の余白サイズ(ピクセル)
	direction: 'horizontal', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションがslide' 以外は無効。
	effect: 'slide', // "slide", "fade"(フェード), "cube"(キューブ回転), "coverflow"(カバーフロー) または "flip"(平面回転)

	// スライダーの自動再生
	// autoplay: true 　のみなら既定値での自動再生
	autoplay: {
		delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
		stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
		disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
	},
	// ページネーションを表示する場合
	pagination: {
		el: '.swiper-pagination',　 // ページネーションを表示するセレクタ
	},
	// 前後スライドへのナビゲーションを表示する場合
	navigation: {
		nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
		prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
	}
});
</script>