单击图库中的缩略图时显示滑动滑块
Display a Swiper slider when clicking a thumbnail in a gallery
我正在使用 Swiper 构建带有滑块功能的缩略图库。默认情况下,滑块是隐藏的,当用户单击其中一个图像时,必须显示滑块以显示单击的图像。滑块打开后,用户可以单击关闭按钮将其隐藏,然后 return 进入缩略图库。
这是我正在使用的代码:
JS:
var swiper;
swiper = new Swiper( '.gallery-slider .swiper-container', {
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});
$( '.gallery-thumbnails a[data-slide]' ).on( 'click', function( e ) {
e.preventDefault();
$( '.gallery-thumbnails' ).hide();
$( '.gallery-slider' ).show();
var slideno = $( this ).data( 'slide' );
swiper.slideTo( slideno + 1, false, false );
});
$( '.gallery-slider .close' ).on( 'click', function( e ) {
e.preventDefault();
$( '.gallery-slider' ).hide();
$( '.gallery-thumbnails' ).show();
});
CSS:
.gallery-slider {
display: none;
}
HTML:
<div class="gallery-thumbnails">
<div class="gallery-image"><a href="" data-slide="0"><img src="thumb0.jpg" /></a></div>
<div class="gallery-image"><a href="" data-slide="1"><img src="thumb1.jpg" /></a></div>
<div class="gallery-image"><a href="" data-slide="2"><img src="thumb2.jpg" /></a></div>
<div class="gallery-image"><a href="" data-slide="3"><img src="thumb3.jpg" /></a></div>
....
</div>
<div class="gallery-slider">
<div class="swiper-container">
<div class="swiper-prev">previous</div>
<div class="swiper-next">next</div>
<div class="close">close</div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="slide0.jpg" /></div>
<div class="swiper-slide"><img src="slide1.jpg" /></div>
<div class="swiper-slide"><img src="slide2.jpg" /></div>
<div class="swiper-slide"><img src="slide3.jpg" /></div>
....
</div>
</div>
</div>
使用此代码,当用户单击缩略图时会显示滑块,但滑块本身不起作用。下一个和上一个按钮不做任何事情。滑块隐藏时没有初始化吗?
我做错了什么?任何帮助将不胜感激。
谢谢
显然,您需要在初始化 Swiper 时添加 observer
和 observeParents
参数,以便每次更改其样式(如 hide/show)时更新(重新初始化)滑块或修改其子元素(如 adding/removing 幻灯片)或其父元素。
var swiper;
swiper = new Swiper( '.gallery-slider .swiper-container', {
loop: true,
observer: true,
observeParents: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});
我使用灯箱 (fancybox) 和刷卡器来设置此选项。当用户点击缩略图时,它会打开一个包含所选项目的灯箱。
使用滑动器声明变量并在弹出窗口加载后初始化。
var mySwiper = new Swiper('.gallery-slider', {
init: false,
slidesPerView: 1,
centeredSlides: true,
loop: false,
observer: true,
observeParents: true,
});
然后在使用 facnybox 触发弹出后。
$('#product-images-slider .elem').click(function(e) {
e.preventDefault();
var thisTargetImage = $('#product-images-slider .elem.image').index(this);
$.fancybox.open({
src: "#productLightbox",
type: 'inline',
opts: {
toolbar: false,
defaultType: 'inline',
autoFocus: true,
touch: false,
afterLoad: function() {
mySwiper.init();
// target to index image slide
mySwiper.slideTo(thisTargetImage);
},
}
})
});
HTMl 用于弹出触发器
<div id="product-images-slider" class="prod-img-pic-wrap">
<a class="elem fancybox-trigger image" data-type='image' href="..805fd8a03c0b67d44c8114c0087c030e-hi.jpg">
<img src="..805fd8a03c0b67d44c8114c0087c030e-md.jpg" width="320">
</a>
</div>
带有 fancybox 包装器的 Swiper 弹出窗口
<div id="productLightbox" class="gallery">
<div class="swiper-container gallery-slider">
<div class="swiper-wrapper"></div>
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
</div>
</div>
我正在使用 Swiper 构建带有滑块功能的缩略图库。默认情况下,滑块是隐藏的,当用户单击其中一个图像时,必须显示滑块以显示单击的图像。滑块打开后,用户可以单击关闭按钮将其隐藏,然后 return 进入缩略图库。
这是我正在使用的代码:
JS:
var swiper;
swiper = new Swiper( '.gallery-slider .swiper-container', {
loop: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});
$( '.gallery-thumbnails a[data-slide]' ).on( 'click', function( e ) {
e.preventDefault();
$( '.gallery-thumbnails' ).hide();
$( '.gallery-slider' ).show();
var slideno = $( this ).data( 'slide' );
swiper.slideTo( slideno + 1, false, false );
});
$( '.gallery-slider .close' ).on( 'click', function( e ) {
e.preventDefault();
$( '.gallery-slider' ).hide();
$( '.gallery-thumbnails' ).show();
});
CSS:
.gallery-slider {
display: none;
}
HTML:
<div class="gallery-thumbnails">
<div class="gallery-image"><a href="" data-slide="0"><img src="thumb0.jpg" /></a></div>
<div class="gallery-image"><a href="" data-slide="1"><img src="thumb1.jpg" /></a></div>
<div class="gallery-image"><a href="" data-slide="2"><img src="thumb2.jpg" /></a></div>
<div class="gallery-image"><a href="" data-slide="3"><img src="thumb3.jpg" /></a></div>
....
</div>
<div class="gallery-slider">
<div class="swiper-container">
<div class="swiper-prev">previous</div>
<div class="swiper-next">next</div>
<div class="close">close</div>
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="slide0.jpg" /></div>
<div class="swiper-slide"><img src="slide1.jpg" /></div>
<div class="swiper-slide"><img src="slide2.jpg" /></div>
<div class="swiper-slide"><img src="slide3.jpg" /></div>
....
</div>
</div>
</div>
使用此代码,当用户单击缩略图时会显示滑块,但滑块本身不起作用。下一个和上一个按钮不做任何事情。滑块隐藏时没有初始化吗?
我做错了什么?任何帮助将不胜感激。
谢谢
显然,您需要在初始化 Swiper 时添加 observer
和 observeParents
参数,以便每次更改其样式(如 hide/show)时更新(重新初始化)滑块或修改其子元素(如 adding/removing 幻灯片)或其父元素。
var swiper;
swiper = new Swiper( '.gallery-slider .swiper-container', {
loop: true,
observer: true,
observeParents: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});
我使用灯箱 (fancybox) 和刷卡器来设置此选项。当用户点击缩略图时,它会打开一个包含所选项目的灯箱。
使用滑动器声明变量并在弹出窗口加载后初始化。
var mySwiper = new Swiper('.gallery-slider', {
init: false,
slidesPerView: 1,
centeredSlides: true,
loop: false,
observer: true,
observeParents: true,
});
然后在使用 facnybox 触发弹出后。
$('#product-images-slider .elem').click(function(e) {
e.preventDefault();
var thisTargetImage = $('#product-images-slider .elem.image').index(this);
$.fancybox.open({
src: "#productLightbox",
type: 'inline',
opts: {
toolbar: false,
defaultType: 'inline',
autoFocus: true,
touch: false,
afterLoad: function() {
mySwiper.init();
// target to index image slide
mySwiper.slideTo(thisTargetImage);
},
}
})
});
HTMl 用于弹出触发器
<div id="product-images-slider" class="prod-img-pic-wrap">
<a class="elem fancybox-trigger image" data-type='image' href="..805fd8a03c0b67d44c8114c0087c030e-hi.jpg">
<img src="..805fd8a03c0b67d44c8114c0087c030e-md.jpg" width="320">
</a>
</div>
带有 fancybox 包装器的 Swiper 弹出窗口
<div id="productLightbox" class="gallery">
<div class="swiper-container gallery-slider">
<div class="swiper-wrapper"></div>
<div class="swiper-button-next swiper-button-black"></div>
<div class="swiper-button-prev swiper-button-black"></div>
</div>
</div>