个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试利用Sly Scroller用于水平滚动。我尝试阅读和理解文档，但我只是不明白如何使用它。
任何人都可以帮助我开始使用比阅读文档更简单的示例，甚至指定任何 jsfiddle 实现或有关该主题的教程吗？
最佳答案
在给你一个例子之前，我想让你精确地描述一下你的环境(例如，你使用的是 php 框架吗？)首先，您要确保您已对这些脚本进行了收费:1-[jquery 1.7] 或 > 2- sly.min.js 3-modernizr.js
。提示:你可以使用凉亭接下来你必须添加这个脚本
<script type="text/javascript">
jQuery(function($) {
'use strict';
// -------------------------------------------------------------
// Basic Navigation
// -------------------------------------------------------------
(function() {
var $frame = $('#basic');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
forward: $wrap.find('.forward'),
backward: $wrap.find('.backward'),
prev: $wrap.find('.prev'),
next: $wrap.find('.next'),
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// To Start button
$wrap.find('.toStart').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the start of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toStart', item);
});
// To Center button
$wrap.find('.toCenter').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the center of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toCenter', item);
});
// To End button
$wrap.find('.toEnd').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the end of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toEnd', item);
});
// Add item
$wrap.find('.add').on('click', function() {
$frame.sly('add', '<li>' + $slidee.children().length + '</li>');
});
// Remove item
$wrap.find('.remove').on('click', function() {
$frame.sly('remove', -1);
});
}());
// -------------------------------------------------------------
// Centered Navigation
// -------------------------------------------------------------
(function() {
var $frame = $('#centered');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'centered',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 4,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// Force Centered Navigation
// -------------------------------------------------------------
(function() {
var $frame = $('#forcecentered');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// Cycle By Items
// -------------------------------------------------------------
(function() {
var $frame = $('#cycleitems');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Cycling
cycleBy: 'items',
cycleInterval: 1000,
pauseOnHover: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
// Pause button
$wrap.find('.pause').on('click', function() {
$frame.sly('pause');
});
// Resume button
$wrap.find('.resume').on('click', function() {
$frame.sly('resume');
});
// Toggle button
$wrap.find('.toggle').on('click', function() {
$frame.sly('toggle');
});
}());
// -------------------------------------------------------------
// Cycle By Pages
// -------------------------------------------------------------
(function() {
var $frame = $('#cyclepages');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Cycling
cycleBy: 'pages',
cycleInterval: 1000,
pauseOnHover: 1,
startPaused: 1,
// Buttons
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// Pause button
$wrap.find('.pause').on('click', function() {
$frame.sly('pause');
});
// Resume button
$wrap.find('.resume').on('click', function() {
$frame.sly('resume');
});
// Toggle button
$wrap.find('.toggle').on('click', function() {
$frame.sly('toggle');
});
}());
// -------------------------------------------------------------
// One Item Per Frame
// -------------------------------------------------------------
(function() {
var $frame = $('#oneperframe');
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'forceCentered',
smart: 1,
activateMiddle: 1,
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
prev: $wrap.find('.prev'),
next: $wrap.find('.next')
});
}());
// -------------------------------------------------------------
// Crazy
// -------------------------------------------------------------
(function() {
var $frame = $('#crazy');
var $slidee = $frame.children('ul').eq(0);
var $wrap = $frame.parent();
// Call Sly on frame
$frame.sly({
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 3,
scrollBar: $wrap.find('.scrollbar'),
scrollBy: 1,
pagesBar: $wrap.find('.pages'),
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
easing: 'easeOutExpo',
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
// Buttons
forward: $wrap.find('.forward'),
backward: $wrap.find('.backward'),
prev: $wrap.find('.prev'),
next: $wrap.find('.next'),
prevPage: $wrap.find('.prevPage'),
nextPage: $wrap.find('.nextPage')
});
// To Start button
$wrap.find('.toStart').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the start of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toStart', item);
});
// To Center button
$wrap.find('.toCenter').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the center of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toCenter', item);
});
// To End button
$wrap.find('.toEnd').on('click', function() {
var item = $(this).data('item');
// Animate a particular item to the end of the frame.
// If no item is provided, the whole content will be animated.
$frame.sly('toEnd', item);
});
// Add item
$wrap.find('.add').on('click', function() {
$frame.sly('add', '<li>' + $slidee.children().length + '</li>');
});
// Remove item
$wrap.find('.remove').on('click', function() {
$frame.sly('remove', -1);
});
}());
});
</script>
正如您在上一个脚本中看到的，有多个导航，您只需在此处的 html 部分中选择其中一个即可
<div class="frame" id="cycleitems">// you have to put in the id the animation that you like
<ul class="clearfix">
<!-- please insert inside the li tag what you want to put inside the sly scroller :D -->
<li> some code here for example <img src ="blabla" /> </li>
<li> some code here for example <img src ="blabla" /> </li>
<li> some code here for example <img src ="blabla" /> </li>
</ul></div>
最后是 css 部分:
.crazy ul li:nth-child(2n) {
width: 100px;
margin: 0 4px 0 20px;
}
.crazy ul li:nth-child(3n) {
width: 300px;
margin: 0 10px 0 5px;
}
.crazy ul li:nth-child(4n) {
width: 400px;
margin: 0 30px 0 2px;
}
如果您有任何其他问题，请随时询问:)
关于jquery - 如何使用 Sly Scroller jQuery 基于项目的导航？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20633192/
26
4
0
以下之间有什么区别:data-sly-use、data-sly-resource、data-sly-include 和 数据-sly-模板？我正在阅读 Sightly AEM 上的文档，我非常困惑。
我是新来的。有人可以帮我了解使用之间的区别吗 和 我在AEM html中使用它。使用div标签作为条件语句是否会对结构产生影响？ 最佳答案 当 data-sly-test 中的表达式评估为true
在 AEM 6.1 中，结构如下: - Page - form node - parsys - node 1 - node 2 - ...
所以我正在构建一个多字段创作选项。如果需要，发布者可以添加值并创建更多文本字段。但问题是添加 内的标签标签给我带来了问题。例如: { "@context": "https://sc
使用http://darsa.in/sly/ 为什么这段代码不能让 Sly 工作？抱歉，这是我第一次。我查看了文档并按照它操作，但它不起作用。是不是少了点什么？我是 darsain Sly 的新人。请
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 2年前关闭。 Improve t
我正在尝试使用 http://darsa.in/sly/examples/horizontal.html一页上有多个“按项目循环”轮播。 我的html:
我在使用 Sly 滚动条时遇到问题。 我想设置一个时间线，我可以在其中通过使用鼠标和滚动条拖动来滚动。用鼠标滚动效果很好，但我无法让滚动条工作，而且没有适当的文档。 控制台也没有错误。 这是我的滚动条
有下一个fiddle使用 JQuery 插件。接下来的情况:如果您单击一个元素，它会向左移动。如何使该元素在不点击的情况下自行移动？ var sly = new Sly($('.frame.left'
我是 CUDA 编程的新手，我正在处理一个需要在一台机器上使用多个 GPU 的问题。我知道为了更好的图形编程需要通过 SLI 组合多个 GPU。但是，对于 CUDA 编程，我是否还需要通过 SLI 组
我使用 Darsain/Sly ( Github ) 构建了一个产品 slider 。它工作得非常好，但没有进行无限循环的功能。在 Github 上，我发现了同样的报告问题。 有人使用过这个库并且知道
我见过 HTL data-sly-use 的不同用法 我是这样看的: 而且我看到它是这样自动关闭的: 为什么要使用每种方式，最好的使用方式是什么？ 最佳答案 我认为对于使用它的方式没有任何
我想使用狡猾的 slider 。我正在尝试特别使用水平 slider 。 slider 的链接为 here . 我正在尝试使用强制居中 slider 。但无法从文档或其他任何地方获得任何帮助。如果有人
我需要获取功能 block (定义和所有内容，而不仅仅是声明)，以便获取功能依赖图。从函数依赖关系图中，识别连接的组件并模块化我庞大的 C 代码库，一次一个文件。 问题:我需要一个 C 解析器来识别功
我目前有一个 data-sly-list，它填充一个 JS 数组，如下所示: var infoWindowContent = [
我正在尝试利用Sly Scroller用于水平滚动。我尝试阅读和理解文档，但我只是不明白如何使用它。 任何人都可以帮助我开始使用比阅读文档更简单的示例，甚至指定任何 jsfiddle 实现或有关该主题
我正面临一个一整天都无法解决的问题。到了晚上，我不明白是什么导致了这个问题。现在，我知道是什么原因造成的，但我不知道为什么会导致这个问题。 首先，我正在开发基于 materialize.css 作为前
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
我正在研究 DX11 计算着色器。而且我想知道再添加一张具有 Crossfire/SLI 的显卡是否会提高性能。或者在不使用 Crossfire/SLI 的情况下再添加一张显卡。 有没有人试验过这个？
我有一段 Sightly/HTL 代码如下 - × Tooltip ${properties.tooltip_te
我是一名优秀的程序员,十分优秀！