[英]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.