Login With Github

Swiper API: Zoom

Swiper supports zoom images functionality (similar to what you see on iOS when browsing single photo) where you can zoom-in image by pinch gesture and or by zoom-in/out by double tap on it. In this case, additional layout is required:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="path/to/image1.jpg">
            </div>
        </div>
        <div class="swiper-slide">
            <div class="swiper-zoom-container">
                <img src="path/to/image2.jpg">
            </div>
        </div>
        <div class="swiper-slide">Plain slide with text</div>
        <div class="swiper-slide">
            <!-- Override maxRatio parameter -->
            <div class="swiper-zoom-container" data-swiper-zoom="5">
                <img src="path/to/image1.jpg">
            </div>
        </div>
    </div>
</div>

All "zoomable" images should be wrapped with the div with swiper-zoom-container class. Note, it doesn't support to zoom anything else except single image.

You can override maxRatio parameter for specific slides by using data-swiper-zoom attribute on zoom container.

Zoom Parameters

Parameter Type Default Description
zoom object/boolean  

Enables zooming functionality. Object with zoom parameters or boolean true to enable with default settings. For example:

var mySwiper = new Swiper('.swiper-container', {
  zoom: {
    maxRatio: 5,
  },
});

 

{
maxRatio number 3 Maximum image zoom multiplier
minRatio number 1 Minimal image zoom multiplier
toggle boolean true Enable/disable zoom-in by slide's double tap
containerClass string 'swiper-zoom-container' CSS class name of zoom container
zoomedSlideClass string 'swiper-slide-zoomed' CSS class name of zoomed in container
}

Zoom Methods & Properties

Properties
mySwiper.zoom.enabled Whether the zoom module is enabled
mySwiper.zoom.scale Current image scale ratio
Methods
mySwiper.zoom.enable(); Enable zoom module
mySwiper.zoom.disable(); Disable zoom module
mySwiper.zoom.in(); Zoom in image of the currently active slide
mySwiper.zoom.out(); Zoom out image of the currently active slide
mySwiper.zoom.toggle(); Toggle image zoom of the currently active slide

0 Comment

temp