Swiper.js-几个问题

时间：2019-03-20 19:03:13

标签： html5 swiper

我需要配置Swiper.js的帮助。 如果更改浏览器窗口的大小，则固定缩略图的位置会出现问题。如果我不改变其大小，矛将几乎起作用。 第二个问题是如何控制放大倍数？它目前可以一键点击。每1步有可能从1开始到3？

第三个问题-如果页面上有两个单独的实例（一个为模态），如何将模态从默认的选定幻灯片转移到所选项目？

（谷歌翻译）

我的代码：

$(document).ready(function() {
	
	var galleryThumbs = new Swiper('.gallery-thumbs', {
		observer: true,
		observeParents: true,
		autoHeight: false,
		spaceBetween: 0,
		// slidesPerView: 4,
		slidesPerView:'auto',
		loopedSlides: 3,
		freeMode: true,
		watchSlidesVisibility: true,
		watchSlidesProgress: true,
		direction: 'vertical',
		navigation: {
		  nextEl: '.swiper-button-next',
		  prevEl: '.swiper-button-prev',
		},
		slideToClickedSlide: true,
		on: {
    		resize: function () {
      			/* do something */
      			// galleryThumbs.navigation.update();
      			console.log("resize");
    		}
  		}
	 });
	 var galleryTop = new Swiper('.gallery-top', {
	 	autoHeight: false,
	 	
	 	//zoom: {
  		//maxRatio: 3,
		//},
	 	preloadImages: false,
	 	lazy: true,
		spaceBetween: 0,
		observer: true,
		observeParents: true,
		grabCursor: true,
		navigation: {
		  nextEl: '.swiper-button-next',
		  prevEl: '.swiper-button-prev',
		},
		thumbs: {
		  swiper: galleryThumbs
		}
	 });

	 
	$('.zoomIn').click(function(){
	  galleryTop.zoom.in({
	  	zoom: true,	  	
	  }); 
	})
	$('.zoomOut').click(function(){
	  galleryTop.zoom.out({
	  	zoom: true
	  }); 
	})




	// $(".wrapper").hide();
  
	$("#modal").on('click', function() {  
		$(".wrapper").fadeIn(); 
	});

	$(".close-modal").click(function() { 
    	$(".wrapper").fadeOut(300); 
	});
});
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
}

span {
	font-size: 20px;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	padding: 10px 20px;
	border: solid 1px #000;
}


.wrapper {
	height: 100vh;
	width: 100%; 
	background: #cdcdcd;
	padding: 30px 30px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: fixed;
    z-index: 1000000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    outline: 0;	
}

.wrapper-ins {
	height: calc(100vh - 60px);
	width: 100%;
	position: relative;
}


.close-modal {
    float: right;
    position: absolute;
    right: 0px;
    width: 46px;
    height: 46px;
    cursor: pointer;
    z-index: 99999;
    border: solid 2px #0082c3;
}
.close-modal::before {
	content: "X";
	color: #0082c3;
	display: block;
	font-size: 30px;
	text-align: center;
	line-height: 46px;
}
.overflowHidden {
    overflow: hidden;
}





.swiper-container {
	height: inherit;
	width: inherit;
}

.gallery-top {
	float: left;
	height: inherit;
	width: calc(100% - 130px);
	margin-left: 130px;
}

.gallery-top .swiper-slide {
	align-items: center;
    justify-content: center;
    display: flex;
}

.gallery-top .swiper-slide img {
	width:auto;
	height:auto;
	max-width: 100%;
	max-height: 100%;
}




.gallery-thumbs {
	/* max-height: 100%; */
	width: 100px;
	box-sizing: border-box;
	padding: 0 0;
	background: #9c9c9c;
	position: absolute;
	left: 0;
	z-index: 100;
	padding: 30px 0;
}

.gallery-thumbs .swiper-wrapper {
	height: auto;
	min-height: 120px;
}

.gallery-thumbs .swiper-slide {
	/* width: 100%; */
	width: 100px;
	height: 100px;
	opacity: 0.4;
	position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden; /* dla zoom */
}

.gallery-thumbs .swiper-slide img {
	width:auto; 
	height:auto; 
	max-width: 90%; 
	max-height: 90%;
}

.gallery-thumbs .swiper-slide-thumb-active {
	opacity: 1;
}

.gallery-thumbs .swiper-slide-thumb-active:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: inset 0 0 0 4px #0082c3;
}

.swiper-button-prev.gallery-thumbs-button,
.swiper-button-next.gallery-thumbs-button {
	width: 100%;
	background-color: #fff;
	right: 0;
	left: 0;
	background-size: 20px 20px;
	margin-top: 0;
	height: 30px;
}

.swiper-button-prev.gallery-thumbs-button {
	top: 0;
}
.swiper-button-next.gallery-thumbs-button {
	top: initial;
	bottom: 0
}





.swiper-zoom {
	position: absolute;
	z-index: 1000;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
	font-size: 0; 
}
.zoomOut {
	display: inline-block;
	cursor: pointer;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	margin-right: 2px;
}
.zoomIn {
	display: inline-block;
	cursor: pointer;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	margin-left: 2px;
}
<link href="https://idangero.us/swiper/dist/css/swiper.min.css" rel="stylesheet"/>
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<span id="modal">start modal</span>


<div class="wrapper" style="display: none;">
<div class="wrapper-ins">

	<div class="close-modal-div">
		<div class="close-modal">&nbsp;</div>
    </div>

 
  <div class="swiper-container gallery-thumbs">
	 <div class="swiper-wrapper">
		<div class="swiper-slide">
			<img src="https://cdn.pixabay.com/photo/2014/09/24/14/29/mac-459196_960_720.jpg">
		</div>
		<div class="swiper-slide">
			<img src="https://cdn.pixabay.com/photo/2015/01/20/13/13/ipad-605439_960_720.jpg">
		</div>
		<div class="swiper-slide">
			<img src="https://cdn.pixabay.com/photo/2016/10/09/08/32/digital-marketing-1725340_960_720.jpg">
		</div>
		<div class="swiper-slide">
			<img src="https://cdn.pixabay.com/photo/2015/02/02/15/28/bar-621033_960_720.jpg">
		</div>
		<div class="swiper-slide">
			<img src="https://cdn.pixabay.com/photo/2013/01/29/00/47/google-76517_960_720.png">
		</div>
		<div class="swiper-slide">
			<img src="https://cdn.pixabay.com/photo/2016/06/03/13/57/digital-marketing-1433427_960_720.jpg">
		</div>
	 </div>
	 <div class="swiper-button-next gallery-thumbs-button"></div>
	 <div class="swiper-button-prev gallery-thumbs-button"></div>
	 
  </div>


  <div class="swiper-container gallery-top">
	 <div class="swiper-wrapper">
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<img data-src="https://cdn.pixabay.com/photo/2014/09/24/14/29/mac-459196_960_720.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<img data-src="https://cdn.pixabay.com/photo/2015/01/20/13/13/ipad-605439_960_720.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<img data-src="https://cdn.pixabay.com/photo/2016/10/09/08/32/digital-marketing-1725340_960_720.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<img data-src="https://cdn.pixabay.com/photo/2015/02/02/15/28/bar-621033_960_720.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<img data-src="https://cdn.pixabay.com/photo/2013/01/29/00/47/google-76517_960_720.png" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
		</div>
		<div class="swiper-slide">
			<div class="swiper-zoom-container">
				<img data-src="https://cdn.pixabay.com/photo/2016/06/03/13/57/digital-marketing-1433427_960_720.jpg" class="swiper-lazy">
				<div class="swiper-lazy-preloader"></div>
			</div>
		</div>
	 </div>
  
	 <div class="swiper-button-next swiper-button-white"></div>
	 <div class="swiper-button-prev swiper-button-white"></div>

	 <div class="swiper-zoom">
	 	<div class="zoomOut">-</div>
	 	<div class="zoomIn">+</div>
	 </div>
  </div>

</div>
</div>

0 个答案:

没有答案
相关问题
最新问题