繁体   English   中英

图像变换在每张幻灯片上旋转

[英]Image Transform rotate on each slide

我有一个工作的滑块,它可以正常工作,但是我要寻找的是与当前滑块不同的效果,这是一个工作的JSFiddle示例

在每个幻灯片上,图像正在缩小,我正在寻找相反的效果,它将放大而不是当前效果,但无法做到。

代码如下

<div id="demo-1" data-zs-src='["https://cdn.img42.com/35f7070a6c188d7e325a8c93db7fec05.jpeg", "https://cdn.img42.com/42d703e80b91ac0d7b412e649f761af5.jpeg", "https://cdn.img42.com/e864ec05541d5f0adbc6b73063d05d5c.jpeg"]' data-zs-overlay="dots">
    <div class="demo-inner-content">
        <h1><span>Testing</span> . <span>Slider</span></h1>
        <p>Testing Slider Test Slideshow Test Slideshow Test Slideshow </p>
    </div>
</div>

将比例因子更改为css中的所需值(在此我将其更改为1.0

.zs-enabled .zs-slideshow .zs-slides .zs-slide {
    background: transparent none no-repeat 50% 50%;
    background-size: cover;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

并将补间值更改为所需值(我将其更改为1.5

.css( { 'opacity': 1.0, 'transform': 'scale(1.5, 1.5)', 'z-index': 2 } )

更新小提琴示例

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM