jquery - 使 jquery.anythinglider 响应

标签 jquery css responsive-design anythingslider

我正在使用 anythingslider,但在尝试使其与移动响应式 View 兼容时遇到了重大问题。

基本上我所做的是在窗口调整大小时更改这些变量:

var lists = jQuery('.page-home .featured-rotator ul li');
var slider = jQuery('div.anythingSlider');
var shadow = jQuery('div.region-home-featured')

匹配这个在调整大小时更新的变量:

var slider_width = jQuery('.home-featured').width();

就整个 View 容器而言,有些东西看起来更好,但幻灯片仍以其原始宽度过渡,导致多个幻灯片出现在一个 View 中。

还有其他人试图改变宽度吗?我在另一个答案中读到关于如何设置一个变量,使其在一行代码中响应,但我没有运气尝试实现它。我是做错了还是不适用于此 slider ?

最佳答案

Adjusting Size

For example, if you wanted to make the slides 580px wide instead of 680px wide, you just need to change some CSS. Change the width of .anythingSlider ul li to 580px, change the width of .anythingSlider .wrapper to 580px, and reduce the width of .anythingSlider 100px to 660px.

http://css-tricks.com/anythingslider-jquery-plugin/

您不仅需要调整包装器的大小,还需要调整 li 元素的大小。即,在您的情况下 .featured-rotator ul li

关于jquery - 使 jquery.anythinglider 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11720570/

相关文章:

javascript - 我如何解释 setTimeout 的这种行为?

html - 对齐文本与缩进

javascript - 适用于 WordPress 的 Store Locator Plus 上的自定义 map 样式

html - 如何在输入宽度为 100% 时对齐此图标?

html - 在响应式布局中将 Bootstrap 3 排序列放入同一行

jquery - Bootstrap 中管理仪表板模板的高度修复

css - mat-prefix 用于输入而不是标签

javascript - 如何在jquery中添加这个元素

jquery - 在 JQuery 自动完成中使用当前选择器

javascript - bootstrap tooltip\popover - 解决左侧放置不一致的问题