jquery活动(居中)幻灯片,带缩放效果

时间:2014-12-05 14:58:06

标签: javascript jquery css3 css-transitions bxslider

我正在使用bxslider,我想将当前幻灯片作为缩放效果。

示例图片网址:http://i.imgur.com/bU9I4yT.jpg?1

Bxslider示例示例:http://bxslider.com/examples/carousel-demystified#example4

我看了一些缩放插件,但没有一个具有这种特定效果。

任何人都可以帮我吗?

示例:

(上一页)image1 image2 image3(下一页)

当我点击下一个。它将显示如下

(上一页)image2 image3 image4(下一页)

image3 是当前激活的,因此 image3 会以缩放效果显示。

1 个答案:

答案 0 :(得分:0)

以下样式应该有效。添加一个类"活跃"到活动图像div。还要了解这些样式是由JavaScript添加的,因此您必须在代码中修改它,或将以下样式标记为!important

.bx-viewport {
height: 170px;
padding-top: 10px;
}

.slide {
margin-right: 5px;
}

.slide.active {
width: 360px;
margin-right: 5px;
margin-top: -10px;
}

.slide.active img {
width: 360px;
}

希望这有帮助。