javascript - 具有缩放效果的 jquery 事件(居中)幻灯片

标签 javascript jquery css css-transitions bxslider

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 8 年前

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

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

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

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

谁能帮我解决这个问题?

示例:

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

当我点击下一步时。它会像这样显示

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

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

最佳答案

以下样式应该有效。将“active”类添加到事件图像 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;
}

希望这对您有所帮助。

关于javascript - 具有缩放效果的 jquery 事件(居中)幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27318677/

上一篇:css - 包装器中的导航下拉菜单未显示第二级

下一篇:html - 仅通过 CSS 在视觉上重新格式化表格行

相关文章:

javascript - 无框窗口不可拖动 - Mac OSX

javascript - 未捕获的 TypeError : $. get(...).then 不是函数

javascript - jquery onchange() - 如何将变量放在引号中?

javascript - 使用javascript在html DOM中创建画廊

html - 如何在google chrome浏览器的选择框中显示图片

javascript - 播放 mp3 时突出显示文本

javascript - Google Apps 脚本相当于 PHP 的 hash_hmac() 并具有原始二进制输出?

jquery - 如何关闭 jquery 日期选择器

javascript - 动态生成的 ID 需要单选按钮名称作为属性

html - 使用线性渐变再现与 CSS 渐变等效的 SVG 渐变