Feat: Zoom with different scales/ranges

[3zzy]

Discussed in https://github.com/nolimits4web/swiper/discussions/4727

^{Originally posted by RubenZx July 1, 2021} Is there any way to zoom.in() and zoom.out() at different levels of zoom, instead of have zoom (zoom.in) or not have zoom (zoom.out)? The problem is that I want different levels of zoom, like 100%-150%-200%-250%-300% (100% = minRatio, 300% = maxRatio), when I'm zooming, and not to get the maxRatio zooming when I zoom.in(), I would like to be able to go by steps.

I've found this solution: Zoom in on a mousewheel point (using scale and translate) using js + css, but I think that this feature should be included in the library, instead of doing it by hand.

[smuddy]

Providing a setter function for swiper.zoom.scale would be a quick win.

[liuwilliamBUPT]

Maybe a workround and jQuery is used in this example.

Bind zoom-in to the button and dynamically change data-swiper-zoom. Then you can call swiper.zoom.in to scale picture. Plz note that if you need to zoom-out you also need to call swiper.zoom.in and there may be some typos in the following snippet.

$(".zoom-in").unbind("click").click(function (){
    let $activeImg = $(".swiper-wrapper > div.swiper-slide.swiper-slide-active > div")
    $activeImg.attr({"data-swiper-zoom": +($activeImg.attr("data-swiper-zoom") ?? 1 - 0.3)
    swiper.zoom.in()
})