ECサイト用パーツ

スライダー(バナー5点)

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

ルール・連絡事項

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

パーツ設置費用

55,000

費用メモ

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

CSS

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

HTML

<section id="slider__type5" class="slider__type5">
	<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-pagination"></div><!-- ページネーション -->
		<!-- ナビゲーションボタン -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</section>

JavaScript

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