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

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

てきすとてきすとてきすとてきすとてきすとてきすと

パーツ設置費用

55,000円

費用メモ

バナー増減の場合　1点10,000円で計算する
※サムネイル画像を変える場合は別途料金

CSS

.slider__type3 {
	display: flex;
	overflow: hidden;
	position: relative;
}
.slider__type3 .flexBox {
	align-items: center;
}
.slider__type3 .flexBox .image {
	width: 40%;
}
.slider__type3 .flexBox p {
	font-size: 12px;
	line-height: 1.3;
	margin-left: 2%;
	width: 58%;
}
.slider__type3 .swiper-container {
	width: 100%;
}
.slider__type3 .swiper-container.slider {
	width: 72%;
}
.slider__type3 .swiper-container.slider__thumb {
	height: 288px;
	width: 28%;
}
.slider__type3 .swiper-container.slider__thumb .swiper-slide {
	background-color: #ccc;
	box-sizing: border-box;
	opacity: .5;
	overflow: hidden;
	padding: 10px;
	height: 100%;
}
.slider__type3 .swiper-container.slider__thumb .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}
.slider__type3 .swiper-button-next::after,
.slider__type3 .swiper-button-prev::after {
	content: '';
}
.slider__type3 .swiper-button-next,
.slider__type3 .swiper-button-prev {
	background: url("slider/img/slider_arrow-1.png") no-repeat center / cover;
	image-rendering: -webkit-optimize-contrast;
}
.slider__type3 .swiper-button-next {
	transform: rotate(180deg);
}
.slider__type3 .swiper-pagination {
	bottom: 0;
	width: 100%;
}
.slider__type3 .swiper-pagination-bullet {
	margin: 0 5px;
	height: 12px;
	width: 12px;
}
.slider__type3 .swiper-pagination-bullet-active {
	background: #666;
}
@media screen and (max-width: 800px) {
	.slider__type3 {
		padding-bottom: 4vw;
	}
	.slider__type3 .swiper-button-next,
	.slider__type3 .swiper-button-prev {
		height: 6vw;
		width: 3vw;
	}
	.slider__type3 .swiper-pagination-bullet {
		margin: 0 .8vw;
		height: 1.4vw;
		width: 1.4vw;
	}
	.slider__type3 .swiper-container.slider {
		width: 100%;
	}
	.slider__type3 .swiper-container.slider__thumb {
		display: none;
	}
}
@media screen and (max-width: 540px) {
	.slider__type3 {
		padding-bottom: 6vw;
	}
	.slider__type3 .swiper-button-next,
	.slider__type3 .swiper-button-prev {
		top: 55%;
		height: 6vw;
		width: 3vw;
	}
	.slider__type3 .swiper-pagination-bullet {
		margin: 0 1vw;
		height: 2vw;
		width: 2vw;
	}
}

HTML

<section id="slider__type3" class="slider__type3">
	<div class="swiper-container slider">
		<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-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
	<!-- サムネイル -->
	<div class="swiper-container slider__thumb">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="flexBox">
					<div class="image">
						<img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg">
					</div>
					<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="flexBox">
					<div class="image">
						<img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg">
					</div>
					<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="flexBox">
					<div class="image">
						<img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg">
					</div>
					<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="flexBox">
					<div class="image">
						<img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg">
					</div>
					<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="flexBox">
					<div class="image">
						<img src="https://ec.excellent.ne.jp/wp/wp-content/uploads/2021/02/banner-dammy-image1.jpg">
					</div>
					<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
				</div>
			</div>
		</div>
	</div>
</section>

JavaScript

<script>
//サムネイル
var sliderThumbnail = new Swiper('#slider__type3 .slider__thumb', {
	loop: true,
	slidesPerView: 4,
	spaceBetween: 0,
	freeMode: true,
	watchSlidesVisibility: true,
	watchSlidesProgress: true,
	autoplay: {
	  delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
	  stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
	  disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
	},
	direction: 'vertical', // スライド方向。 'horizontal'(水平) か 'vertical'(垂直)。effectオプションが 'slide' 以外は無効。
});
//スライダー
var slider = new Swiper('#slider__type3 .slider', {
	loop: true,
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	thumbs: {
		swiper: sliderThumbnail
	},
	autoplay: {
		delay: 3000, // スライドが切り替わるまでの表示時間(ミリ秒)
		stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
		disableOnInteraction: true // ユーザーのスワイプ操作を検出したら自動再生を中止するか
	},
});
</script>