pfhwyigou/frontend/views/house/swiper.php

<?php
/**
 * Created by PhpStorm.
 * User: xiaofeng
 * Date: 2018/4/19
 * Time: 下午2:54
 */
use frontend\assets\AppAsset;
use yii\helpers\Html;
AppAsset::addCss($this,Yii::$app->request->baseUrl."/overseas/js/lunbo/swiper-3.4.2.min.css");
AppAsset::addScript($this,Yii::$app->request->baseUrl.'/overseas/js/lunbo/swiper-3.4.2.min.js');
AppAsset::addScript($this,Yii::$app->request->baseUrl."/overseas/js/applyVerify.js");
AppAsset::addScript($this,Yii::$app->request->baseUrl."/overseas/js/swiper.js");
?>

<style>
.view .swiper-slide .swiper_box img:hover{cursor: url(/overseas/img/fdtb.png), default;}
.swiper-zoom-container>canvas, .swiper-zoom-container>img{
	/*width:700px;   2020-07-07注释 */
     max-width:none !important; 
     max-height:none !important; 
     /*object-fit: contain; */
}
.pc-slide {position:fixed;top:0;left:0;width: 100%;height:100%;display:none;z-index:1000;}
.view{z-index:100;width:100%;height:90%;margin-top:2%;}
.view .swiper-container {width:80%;height:100%;}
.view .swiper-slide .swiper_box{width:100%;height:100%;margin:auto;overflow:hidden;}
.view .arrow-left {background: url(/overseas/img/swiper/zuo13.png) no-repeat -11px 2px/ 47px 46px;position: fixed;left: 8%;top: 50%;margin-top: -25px;width: 28px;height:51px;z-index: 10;}
.view .arrow-right {background: url(/overseas/img/swiper/you13.png) no-repeat -11px 2px/ 47px 46px;position: fixed;right: 8%;top: 50%;margin-top: -25px;width: 28px;height: 51px;z-index: 10;}

.preview_box{position:fixed;z-index:10;width:100%;height:16%;margin-top:3%;bottom:0;}
.preview {padding:5px 30px;width:auto;max-width:80%;margin:auto;margin-top: 10px;background:#FFF;border-radius:5px;overflow:hidden;
	position:absolute;top:0;left:50%;display:none;
}
.preview .swiper-container {width:100%;height: 82px;margin:auto;}
.preview .swiper-wrapper.on{display:flex;align-items:center;justify-content:center;}
.preview .swiper-slide {width: 87px;height: 82px;cursor:pointer;position:relative;}
.preview .slide6 {width: 82px;}
.preview .arrow-left {background: url(/overseas/img/swiper/feel3.png) no-repeat  10px 37px/ 9px 18px;position: absolute;left: 0; top: 0;width: 30px;height: 100%;z-index: 10;}
.preview .arrow-right {background: url(/overseas/img/swiper/feel4.png) no-repeat  12px  37px/ 9px 18px;position: absolute;right: 0; top: 0;width: 30px;height: 100%;z-index: 10;}
.preview img {width:95%;height:100%;}
.preview .active-nav:before {content:"";display:block;width:95%;height:100%;position:absolute;top:0;left:0;background:url(/overseas/img/swiper/t01.png) no-repeat 0 0/ 100% 100%;}

.pc_slide_bj{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(51, 51, 51, 0.7);}
.pc_slide_gb{position:absolute;top:7%;right:7%;width:48px;height:48px;z-index:10}
.pc_slide_gb img{width:100%;height:100%;}
.pc_slide_fd{position:absolute;top:15%;right:7%;width:48px;height:48px;z-index:10}
.pc_slide_fd img{width:100%;height:100%;}

.preview_text{position:absolute;top:0;left:0;width:100%;text-align:center;}
.preview_text span{padding:10px 10px;border-radius:0 0 5px 5px;background:#FFF;font-size:17px;color:#444;font-weight:600;}
</style>




 <div class="pc-slide">

 <!--    <div class="pc_slide_bj"></div>

	<div class="view">
		<div class="swiper-container">

  		    <div class="pc_slide_gb"><img src="/overseas/img/swiper/ico_colke.png" alt=""></div>
			<a class="arrow-left" href="#"></a>
			<a class="arrow-right" href="#"></a>

			<div class="swiper-wrapper">

				<div class="swiper-slide">
				    <div class="swiper_box">
						<div class="swiper-zoom-container"><img class="" src="http://pfghouse.pinfangw.com/housealbum/f189bd626c22227df78ca5d7a0c8321d.jpg/pfgwatermark" alt=""></div>
					</div>
				</div>




			</div>
		</div>
	</div>

	<div class="preview_box">
		<div class="preview">
			<a class="arrow-left" href="#"></a>
			<a class="arrow-right" href="#"></a>
			<div class="swiper-container">
				<div class="swiper-wrapper">

					<div class="swiper-slide">
						<img src="http://pfghouse.pinfangw.com/housealbum/f189bd626c22227df78ca5d7a0c8321d.jpg/pfgwatermark" alt="">
					</div>
	
				</div>
			</div>
		</div>
	</div> -->

</div>




</body>
</html>