【サンプル】拡大写真ライダー

indexに戻る JavaScriptの基本 用語解説 使えるJavaScript

ダイアログボックス ウィンドウ イベント ロールオーバー 演算子 配列 日付

正規表現 DOM 関数 数学関数（Math） 画像 フォーム1 フォーム2 フォーム3

【サンプル】カウントダウン 【サンプル】カウントダウン実践 【サンプル】タグ（文章の）の入れ替え 【サンプル】カルーセルスライダー 【サンプル】フリックスライダー 【サンプル】拡大写真ライダー

jQueryの基本 擬似クラス CSSの制御 jQueryサンプル

拡大写真ライダー

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

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

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

<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>
	<div class="swiper-slide">
		<div class="slide-img"><img src="<?php echo get_template_directory_uri(); ?>/img/slid04.jpg" /></div>
	</div>
	<div class="swiper-slide">
		<div class="slide-img"><img src="<?php echo get_template_directory_uri(); ?>/img/slid05.jpg" /></div>
	</div>
	<div class="swiper-slide">
		<div class="slide-img"><img src="<?php echo get_template_directory_uri(); ?>/img/slid06.jpg" /></div>
	</div>
	<div class="swiper-slide">
		<div class="slide-img"><img src="<?php echo get_template_directory_uri(); ?>/img/slid07.jpg" /></div>
	</div>
	<div class="swiper-slide">
		<div class="slide-img"><img src="<?php echo get_template_directory_uri(); ?>/img/slid08.jpg" /></div>
	</div>
</div>
<!-- Add Pagination -->
</div>
</div>



<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>