我需要配置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"> </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>