我正在使用猫头鹰图片轮播。 http://owlgraphic.com/owlcarousel/demos/images.html
它工作正常。我想让当前幻灯片的尺寸比其他幻灯片大一点。 换句话说,我想让当前幻灯片的宽度变大。
为了使当前幻灯片变大,我添加了以下代码:
$(document).ready(function () {
$("#owl-demo").owlCarousel({
autoPlay: 3000,
responsive: true,
addClassActive: true,
items: 4,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3],
});
});
这里我已经将 Active 类添加到 Active 幻灯片中。我试图缩放当前幻灯片。
为此我添加了以下样式表代码。
.active: nth - child(2) {
transform: scale(1.2);
}
但是当轮播滚动第二个元素时不会保持突出显示。需要帮助来缩放 Owl Carousel 中的当前幻灯片。
是否有任何其他缩放当前 slider 的响应式轮播?
最佳答案
http://jsfiddle.net/gjgmqznq/3/
$(document).ready(function () {
$("#owl-demo").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
responsive: true,
addClassActive: true,
items: 4,
itemsDesktop: [1199, 3],
itemsDesktopSmall: [979, 3],
stopOnHover:true,
afterMove:function(){
//reset transform for all item
$(".owl-item").css({
transform:"none"
})
//add transform for 2nd active slide
$(".active").eq(1).css({
transform:"scale(1.9)",
zIndex:3000,
})
},
//set init transform
afterInit:function(){
$(".active").eq(1).css({
transform:"scale(1.9)",
zIndex:3000,
})
}
});
})
关于jquery 猫头鹰轮播 : how to make current slide focused,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24488935/