フリックスライダー

基本型　連想配列　配列の応用　

ループスライダー

参考：https://digipress.info/tech/introducing-swiper-js/

サムネイル付き：https://web改善事例.com/js-swiper-sample/

オプション設定：https://garigaricode.com/swiper/

jQueryに依存しないJavaScriptスライダーライブラリ「Swiper.js」

下記は基本のスライド設定


headに直リンクのライブラリを読み込み。上がCSS、下がJavaScript。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>


【 HTML 】
<div class="swiper-container">
	<!-- 全スライドをまとめるラッパー -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
		<div class="swiper-slide"><img src="img/sample/m_image01.jpg" /></div>
		<div class="swiper-slide"><img src="img/sample/m_image02.jpg" /></div>
		<div class="swiper-slide"><img src="img/sample/m_image03.jpg" /></div>
		<div class="swiper-slide"><img src="img/sample/m_image04.jpg" /></div>
		<div class="swiper-slide"><img src="img/sample/m_image05.jpg" /></div>
		<div class="swiper-slide"><img src="img/sample/m_image06.jpg" /></div>
		<div class="swiper-slide"><img src="img/sample/m_image07.jpg" /></div>
		<div class="swiper-slide"><img src="img/sample/m_image08.jpg" /></div>
	</div>

	<!-- ページネーションを表示する場合 -->
	<div class="swiper-pagination"></div>

	<!-- 前後スライドへのナビゲーションボタン(矢印)を表示する場合 -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>


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

	// スライダーの自動再生
	// autoplay: true 　のみなら既定値での自動再生
	autoplay: {
		delay: 1000, // スライドが切り替わるまでの表示時間(ミリ秒)
		stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
		disableOnInteraction: false // ユーザーのスワイプ操作を検出したら自動再生を中止するか
	},

	// レスポンシブ化条件
	breakpoints: {
		// 980ピクセル幅以下になったら
		980: {
		slidesPerView: 3,
		spaceBetween: 30
		},
		// 640ピクセル幅以下になったら
		640: {
		slidesPerView: 2,
		spaceBetween: 20
		}
	},

	// ページネーションを表示する場合
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	},

	// 前後スライドへのナビゲーションを表示する場合
	navigation: {
		nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
		prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
	},
});
</script>

各種ＣＳＳ設定


◆スライダー全体のサイズ設定CSS
.swiper-container {
    width: 600px;
    height: 300px;
}

◆全画面の場合の設定CSS
.swiper-container {
    width: 100%;
    height: 100vh;
}

◆丸ポチを画面の下に配置CSS
.swiper-pagination{
	position: relative !important;
	padding-top:20px;
}

◆左右のバーを画面中央に配置
.swiper-button-prev, .swiper-button-next {
	top: calc((100% - 50px) * 0.5);
	margin-top: -22px;
}

◆4の倍数＋1枚目のスライドのスタイル（1枚目、5枚目…）
.swiper-slide:nth-child(4n+1) {
	background-color: #EECB27;
}

▲このページのTOPに戻る▲

Swiperでズームインしながらフェードで切り替わるスライダー


【 HTML 】
<div class="slide_box">
<div class="swiper-container">
<div class="swiper-wrapper">
	<div class="swiper-slide">
		<div class="slide-img"><img src="<?php echo get_template_directory_uri(); ?>/img/slid01.jpg" /></div>
	</div>
	<div class="swiper-slide">
		<div class="slide-img"><img src="<?php echo get_template_directory_uri(); ?>/img/slid02.jpg" /></div>
	</div>
	<div class="swiper-slide">
		<div class="slide-img"><img src="<?php echo get_template_directory_uri(); ?>/img/slid03.jpg" /></div>


</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>



【 JavaScript 】
<script>
let swipeOption = {
  loop: true,
  effect: 'fade',
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
  speed: 2000,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  }
}
new Swiper('.swiper-container', swipeOption);
</script>


【 CSS 】
/*--------------------------------------------------------

スライダー

--------------------------------------------------------*/
.slide_box{
  padding: 16px;
}
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}
.slide-img img{
  display: block;
}

特定の記事をスライド表示


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />
<link rel="stylesheet" href="https://stabble.biz/wp-content/themes/fake_tcd074/css/slider.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>



<div class="swiper-container">
	<!-- 全スライドをまとめるラッパー -->
	<div class="swiper-wrapper">
		<!-- 各スライド -->
<?php query_posts('cat=10&showposts=100'); ?> <!--カテゴリIDと表示件数-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
		<div class="swiper-slide">
			<a href="<?php the_permalink() ?>"><?php the_post_thumbnail('medium'); ?></a>
			<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<p><?php the_excerpt(); ?></p>
			<p class="t-style"><?php the_time('Y/m/d') ?></p><?php the_category(); ?>
		</div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
	</div>
	<!-- ページネーションを表示する場合 -->
	<div class="swiper-pagination"></div>

	<!-- 前後スライドへのナビゲーションボタン(矢印)を表示する場合 -->
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
</div>






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

	// スライダーの自動再生
	// autoplay: true 　のみなら既定値での自動再生
	autoplay: {
		delay: 2000, // スライドが切り替わるまでの表示時間(ミリ秒)
		stopOnLast: false, // 最後のスライドまで表示されたら自動再生を中止するか
		disableOnInteraction: false // ユーザーのスワイプ操作を検出したら自動再生を中止するか
	},


	// レスポンシブ化条件
	breakpoints: {
		// 980ピクセル幅以下になったら
		980: {
		slidesPerView: 2,
		spaceBetween: 30
		},
		// 640ピクセル幅以下になったら
		640: {
		slidesPerView: 2,
		spaceBetween: 20
		}
	},

	// ページネーションを表示する場合
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true
	},

	// 前後スライドへのナビゲーションを表示する場合
	navigation: {
		nextEl: '.swiper-button-next', // 次のスライドボタンのセレクタ
		prevEl: '.swiper-button-prev', // 前のスライドボタンのセレクタ
	},
});
</script>



【ＣＳＳ】
.swiper-button-prev, .swiper-button-next {
	top: calc((100% - 50px) * 0.5);
	margin-top: -22px;
}
.swiper-container {
    width: 1140px;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	padding-top:30px;
	line-height:140%;
}

.swiper-wrapper h3, .swiper-wrapper p, .swiper-wrapper ul{
	width:275px;
	max-width:100%;
}
.swiper-wrapper img{
	height:179px;
}
.swiper-wrapper h3{margin-top:10px; margin-bottom:10px;}
.swiper-wrapper ul li{display:inline;}

/*h3リンク*/
.swiper-wrapper h3 a, .swiper-wrapper p a{text-decoration:none;}
.swiper-wrapper h3 a:link{color:#FFFFFF;}
.swiper-wrapper h3 a:visited{color:#FFFFFF;}
.swiper-wrapper h3 a:hover{color:#FFFFFF; text-decoration:underline;}
.swiper-wrapper h3 a:active{color:#FFFFFF;}

.swiper-wrapper h3{margin-top:0px!important;}


/*本文リンク*/
.swiper-wrapper p a:link{color:#272727;}
.swiper-wrapper p a:visited{color:#272727;}
.swiper-wrapper p a:hover{color:#272727; text-decoration:underline;}
.swiper-wrapper p a:active{color:#272727;}

.swiper-wrapper p{margin-bottom:10px!important;}


.t-style{
	color:#999999;
	margin-top:10px;
}


@media screen and (min-width: 482px) {/*PCのみ矢印を画面の外へ*/
	.swiper-wrapper{padding-left:40px;}
	.swiper-container {height:550px;}
}
@media screen and (max-width: 481px)  {/*スマホ*/
	.t-style{font-size:85%;}
}

▲このページのTOPに戻る

▲このページのTOPに戻る▲

【サンプル】フリックスライダー

ループスライダー

各種ＣＳＳ設定

Swiperでズームインしながらフェードで切り替わるスライダー

特定の記事をスライド表示