jquery Owl Carousel:如何使当前幻灯片集中
Posted
技术标签:
【中文标题】jquery Owl Carousel:如何使当前幻灯片集中【英文标题】:jquery Owl Carousel: how to make current slide focused 【发布时间】:2014-08-20 18:06:16 【问题描述】:我正在使用 Owl Image 轮播。 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 中的当前幻灯片。
还有其他可以缩放当前滑块的响应式轮播吗?
【问题讨论】:
您一次显示 4 张幻灯片,那么如何检测中间的一张?还提示:- 您需要更改该图像的宽度和高度 如何更改该图像的高度。由于轮播将滚动当前幻灯片项将更改。所以当前的幻灯片项目应该是 zoom With Transform:scale(2.2) 你发现了吗?我也面临同样的挑战。 请看我的回答 【参考方案1】: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 Owl Carousel:如何使当前幻灯片集中的主要内容,如果未能解决你的问题,请参考以下文章
jQuery Owl Carousel:无法读取未定义的属性“克隆”