- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试找到一种方法来针对不同的屏幕尺寸更改 carouselVisible
项目的数量。我希望在 768 像素的屏幕分辨率下显示 3 个项目,当您在 360 度缩小时显示 1 个项目。
这可能吗?
jquery
$('#carousel').cycle({
allowWrap: true,
carouselVisible: 5,
prev: '#prev',
next: '#next',
carouselFluid: true,
timeout: 0,
slides: 'article',
fx: 'carousel'
});
var slideshows1 = $('#carousel').on('cycle-next cycle-prev', function (e, opts) {
slideshows1.not(this).cycle('goto', opts.currSlide);
});
var slideshows2 = $('#carousel1').on('cycle-next cycle-prev', function (e, opts) {
slideshows2.not(this).cycle('goto', opts.currSlide);
});
$('#carousel article').click(function () {
var count = $("#carousel1 .readmore").length - 1;
var selectedIndex = $('#carousel').data('cycle.API').getSlideIndex(this);
var index = selectedIndex<count ? selectedIndex: (selectedIndex-count)%count;
slideshows1.cycle('goto', index);
slideshows2.cycle('goto', index);
});
HTML
<div class="service">
<h1>Lead1</h1>
</div>
</article>
<article>
<div class="service">
<h1>Lead2</h1>
</div>
</article>
</div>
<div id="carousel1" data-allow-wrap="true" data-cycle-prev="#prev" data-cycle-next="#next" class="cycle-slideshow" data-cycle-timeout="0" data-cycle-manual-fx="scrollHorz" data-cycle-slides=".readmore">
<div class="readmore">
<h2 class="lead">Lead</h2>
<p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a>
</div>
<div class="readmore">
<h2 class="lead">Lead1</h2>
<p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a>
</div>
<div class="readmore">
<h2 class="lead">Lead2</h2>
<p>Testing some text right here</p> <a class="cta" href="#">Läs mer</a>
</div>
</div>
<div id="next">next</div>
<div id="prev">prev</div>
最佳答案
视情况而定,如果你需要动态调整,当你的用户调整页面大小时,你会做这样的事情:
var properties = {
allowWrap: true,
carouselVisible: 5,
prev: '#prev',
next: '#next',
carouselFluid: true,
timeout: 0,
slides: 'article',
fx: 'carousel'
}
$(window).resize(function() {
var width = $(window).width();
var height = $(window).height();
var slideAmount;
if (width >= 768) {
slideAmount = 3;
} else if (width <= 360) {
slideAmount = 1;
} else {
slideAmount = 2;
}
if (properties.carouselVisible != slideAmount) {
$('#carousel').cycle('reinit');
}
});
如果您只想执行一次,那么很明显,您只会获得初始屏幕尺寸:
var width = $(window).width();
var height = $(window).height();
// Instantiate your carousel with parameters based on screen size
关于javascript - 如何更改针对不同屏幕尺寸显示的项目数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36170544/
driver.get("https://www.yahoo.com/"); driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS)
原始 DataFrame 只有 1 列元组。我想添加一列,其中包含每个元组中的项目数(长度)。 ITEMS 0 (EGG, WATER, TOMATOE) 1 (MILK
我有一个包含这些部分的 ListView。当有一个部分时,它就会取代另一个部分。也就是说,如果 ListView 项目计数为 30,则该部分将取代第一段,结果显示只有 29 点。 这里有一张图,很清楚
这个问题在这里已经有了答案: parsing nested parentheses in python, grab content by level (4 个答案) 关闭 4 年前。 我想提取与 a
我决定使用 Gwan 的 KV 存储来代替 Redis NoSQL 数据库。我在手册中看到,kv 支持文件 IO 的持久标志,以在重新启动之间保留我猜的数据。它使用回调recfn,但是这个函数究竟如何
我现在正在学习 swift。我在我的 swift 代码中使用了 ANetworking (Obj C 中的库)。我已经成功返回解析后的 JSON。但是我想找到返回的 json 项目的数量。这是我到目前
我正在重复这样的 JSON 对象(嵌套)项目列表: {{specific}} 我想在页面顶部的每个项目对象中显示“特定”项目的数量(在 ng-repeat 范围之外)。我无
我目前有 8 个 UITabBar 项目,所有这些项目都可以在“更多” View 中进行编辑。我的问题是,允许的标签栏项目的绝对最大数量是多少? 我理解5是一次最多可见的;我正在寻找您能拥有的最长月经
如果我在 DynamoDB 中扫描或查询,则可以设置 Limit属性(property)。 DynamoDB documentation说如下: The maximum number of items
我想知道的是我们如何在 Angular js 中获取项目的 ng-repeat 计数。从下面的代码中,我想获得技能的数量,因为我想对其进行限制。如果 skill count > 5 将 skill 限
我在日志中收到此异常 - java.lang.IndexOutOfBoundsException: Invalid item position 0(0). Item count:0
我是一名优秀的程序员,十分优秀!