swiper.txt

 <!-- 幻燈片內容 -->
                   <div class="swiper-container">
                  	<!-- 外層(必要) -->
	               <div class="swiper-wrapper">
		           <!-- 幻燈片內容 -->
	            	<div class="swiper-slide">
						<div class='embed-container'><iframe src='https://www.youtube.com/embed//2Wd0BQRqiy8' frameborder='0' allowfullscreen></iframe></div>
						<style>
							.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
							.embed-container iframe, .embed-container object, 
							.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
						</style>	
					</div>
	             <div class="swiper-slide">
					<style>
						.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
						.embed-container iframe, .embed-container object, 
						.embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
					</style>
						<div class='embed-container'><iframe src='https://www.youtube.com/embed//2Wd0BQRqiy8' frameborder='0' allowfullscreen></iframe></div>
				 </div>

	          </div>
	          <!-- 分頁(非必要) -->
	          <div class="swiper-pagination"></div>

            	<!-- 上/下一頁按鈕(非必要) -->
          	<div class="swiper-button-prev"></div>
          	<div class="swiper-button-next"></div>

          	
</div>
 <style>
	.swiper-container {
		/* 設定幻燈片寬度跟高度 */
		width: 30em;
		height: 30em;
}
</style> 
<script>
	var mySwiper = new Swiper ( ".swiper-container", {
		// 參數設定[註1]
		direction: "horizontal", // 方向
		loop: true,  // 循環
		pagination: {
			el: ".swiper-pagination",  // 分頁物件
		},
		navigation: {
			nextEl: ".swiper-button-next", // 上一頁按鈕物件
			prevEl: ".swiper-button-prev", // 下一頁按鈕物件
		},
		scrollbar: {
			el: ".swiper-scrollbar", // 捲軸物件
		}
	})
</script>