ตัวอย่าง สามารถปัดสไลด์ปัด ๆ ได้ใน browser และ web view

Import

<script src="swiper.min.js" />
<link href="swiper.min.css" rel="stylesheet" />

เพิ่มในหน้าที่ต้องการแสดง

ดาวน์โหลดไฟล์

https://programmerdesign.com/uploads/file/swiper.min.js

https://programmerdesign.com/uploads/file/swiper.min.css

Js

 $(function(){
		swiper_test();
	});
	function swiper_test(){
    var swiper1 = new Swiper('.swiper-container', {
		                    slidesPerView: 1,
		                    spaceBetweenSlides: 40,
		breakpoints: {
		                // when window width is <= 499px
		                700: {
		                    slidesPerView: 1,
		                    spaceBetweenSlides: 30
		                },
		                // when window width is <= 999px
		                999: {
		                    slidesPerView: 1,
		                    spaceBetweenSlides: 40
		                }
		               
		            }
    });
    
}

PHP

 <div class="no-padding col-lg-12 col-md-12 col-sm-12 col-xs-12 " style="background-color:#FFF;margin-top: 5px;margin-bottom: 5px;">

  <div class="swiper-container">
      
	  <div class="swiper-wrapper" >
                 <?php
			  foreach($pages as $page){
                  ?>
			  <div class="swiper-slide" >
		                   <a>
				  <div><img src="<?print Yii::getAlias("@ImagePath/uploads/user/").Yii::$app->user->identity->id."/slide-book"."/".$page->slideBook->content_id."/slide_image"."/".$page->image_path;?>" style="width:100%;"></div>
					<div><?print $page->details;?>>/div>
				  </a>
							  
			</div>
	        <? }?>
		     <div class="swiper-pagination1"></div>
	     </div>
	</div>
</div>