Swiper Zoom(调焦) - zoom

开启焦距功能:双击slide会放大/缩小,并且在手机端可双指触摸缩放。可设置缩放选项或设为true使用默认值。 需要在slide中增加类名swiper-zoom-container,结构如下:
<div class="swiper-slide">
    <div class="swiper-zoom-container"><img src="path/to/image"></div>
</div>
zoom 默认只能缩放类名swiper-zoom-container 内的img、picture或canvas,如需在其他类型元素上缩放,可加上类名swiper-zoom-target (5.3.6)
 

zoom信息

类型:
booleanobject/boolean
举例:
true
启用版本:
4.0.0

效果演示

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<div class="swiper-slide"> 
    <div class="swiper-zoom-container"> <img src="path/to/image"> </div> <!-- 缩放图片 -->
</div>

<div class="swiper-slide">
    <div class="swiper-zoom-container">
        <div class="swiper-zoom-target" style="background-image: url(...)"></div> <!-- 缩放其他元素 5.3.6 -->
    </div>
</div>

<script language="javascript"> 
    var mySwiper = new Swiper('.swiper',{
        zoom : true, //开启缩放功能
    })
</script>