自 AnythingSlider 上线 GitHub 以来,许多人推动了该项目的发展。 对 ProLoser、Mottie、meancode、betzster 和 kalasoft 提交代码表示感谢,使该项目功能更丰富、更智能、更优化。

Mottie 的分支是最先进的,因此我将在下面链接到该分支的下载按钮。 自上次我们在此讨论该项目以来,发生了许多变化。 例如:页面上的多个滑块(同时保留使用 #hash 链接链接到任一滑块上的幻灯片的能力)、调整大小以适应独特大小的幻灯片、反转滑块的方向,以及更多行为选项。
2012 年 8 月更新:截至今日,Anything Slider 已更新至 1.8.6 版本,并且仍然在不断发展!
看起来很不错。
干得好,伙计们。
它也有 WordPress 插件吗? 那将很棒…
我认为它没有 WordPress 插件,但有一些插件具有类似的功能。 如果你真的需要这个实现,你可以将它与 WordPress 集成,前提是你对主题构建足够熟悉。
对这款很棒的滑块进行的出色更新,感谢分享!
我非常喜欢上一个版本,我将其自定义以用于我网站的投资组合部分,你可以在此处查看 - http://www.curtisscott.com/portfolio.html
再次感谢所有参与此次最新更新的人员。 我期待检查此版本并查看所有新功能!
CURTIS :D
来自 Concept Feedback!
我认为演示不再正常工作。 它只是在页面上以 UL 形式列出了所有幻灯片。 我是否遗漏了什么?
你需要确保你的浏览器启用了 JavaScript。
我刚刚将 AnythingSlider 更新至 v1.41 - 现在附带主题! 我添加了 一个演示在这里.
免责声明:我并不声称自己是一位图形艺术家,因此请耐心等待我的拙劣主题。 此外,简约圆形和简约方形主题在 IE 中看起来相同,因为我使用了 border-radius。 我还想问一下是否可以复制 Curtis Scott 的主题,并将其与基本文件一起提供 :)
请随时将我的主题复制到你的版本中。
再次感谢你对这次最新版本的辛勤工作。 能在你的网站上添加一个指向我的网站的信用/链接会很好,但这并不是使用它所必需的。 :)
也许是我的浏览器问题,但 XP 机器上的 FF 3.5.13 在 YouTube 视频从视野中滑出后不会隐藏它们?
嗯,但在 Chrome 中它运行得很好。
我使用 Opera 也是这样。
YouTube 和其他 Flash 元素需要将 “wmode” 参数设置为 “opaque” - 这应该可以解决问题。
好的,我知道我正在疯狂地选择,但我添加了一个 “addWmodeToObject”,其默认值为 “opaque”。 希望这能解决人们遇到的问题。
更新的演示 和 在此处下载
看起来很不错,我将在一些 Drupal 主题中使用它,感谢你提供很棒的插件更新 :)
我第一次在最新版本的 Opera 上启动演示页面时,它一片混乱,我不得不重新加载页面才能看到所有内容。 当然,YouTube 视频问题仍然存在。
绝对是一个很大的进步。 干得好!
真的很棒,很有帮助
它运行得很好。 我一直很喜欢 “anything” 滑块,现在它还包含了来自 Carl Sagan 的电子音乐! 还能要求什么呢?
哇,他们做了一份很棒的工作。 我也使用你的 anythingSlider。 我应该更新了!
很棒的工作,面板调整大小选项真的很棒!
我喜欢这个。 我唯一没有看到的,我认为对我有帮助的是从随机幻灯片开始的选项。 有人可以帮助我吗? 谢谢。
嗨,DeSha!
在初始化代码中尝试以下代码
$('#slider1').anythingSlider({
startPanel : Math.floor(Math.random()*5)
});
“5” 应该等于你拥有的幻灯片数量
感谢 Motti!!!
嗨,Mottie,
很棒的滑块! 你介意向像我这样的新手解释一下如何将上述代码添加到初始化代码中吗?
$(‘#slider1’).anythingSlider({
startPanel : Math.floor(Math.random()*5)
});
提前感谢!
嗨,Jamie,
实际上,该代码就是初始化代码。 “startPanel” 只是许多选项(键)之一,设置选项被称为 “value”。
大多数插件都以相同的方式进行初始化
$(目标).插件({
key1 : value1,
key2 : value2
});
我一直在使用这款滑块很长时间了,我非常喜欢它的灵活性。 我发现我将其用于各种不同的项目,但我需要定期对其进行修改以适应我的需求。 如果有我可以利用的回调函数,则无需进行这些修改。
未来的版本可以包括在逻辑点处的回调函数吗? 转换的开始、停止、开始和结束?
继续保持出色的工作!
在 最新版本 (1.43) 中,你可以绑定到触发的事件。 我在主索引页面 (此处演示) 上包含了一些示例。 我知道这些不是回调函数,但希望它们能满足你的需求。
哦,还要在该页面的 firebug 控制台中查看,它会列出事件发生的顺序。
很好的帖子,你做得很好
我每天都在做 网页设计与博客
只有点击事件!
没有悬停事件!
嗨,John!
我不确定你到底要问什么,但在当前版本 (1.43) 中,添加了新的交互性选项。 将 “mouseenter” 而不是 “hover” 添加到你想更改的任何元素 - 在此处下载
很棒的工作。 我特别喜欢可选的调整大小功能。
哇,太酷了,我喜欢左右导航按钮上的效果
:)
哇,很棒的工作,看起来很棒
嗨,各位,
只有我吗?
但是当我下载新的 1.4 版本时,它仍然显示为 v1.3.7.0 版本?
我似乎在任何地方都找不到正确的版本。
就像我说的,可能只是我,或者可能是因为今天是星期一???
也许有人可以指点我正确的方向吗?
此致
理查德
我也找不到 1.4 版本。有人可以帮忙吗?
从 我的 Github 页面 下载(当前版本 1.43)
好的,我在那个页面上点击哪里?
如果我选择右上角的“下载源代码”按钮,我会得到两个选择:Zip 或 tar。我选择了 Zip 文件。
现在下载的文件名为:Mottie-AnythingSlider-v1.3.3-15-g64717d7.zip!?
所以就像我说的:是我自己有问题,还是我仍然在做错什么?
此致
嗨,RichyVn!
忽略文件名就可以了……我认为我的标签设置不正确(仍在学习 Github)。但我确实看到 ProLoser 已更新到最新版本,而且他擅长添加标签/文件名:P……无论如何,检查 .js 文件中的版本号以确保你拥有哪个版本。
你是我最喜欢的 jQuery 和 CSS 大师:-)
感谢你所有的出色工作!
不过我有一个菜鸟问题
几周前在 CSS Tricks 论坛上发布过,但我在这里再问一遍
http://kostov.de/allegro/index.html#
这是我目前正在开发的页面。
出现以下问题
在 Chrome 和 Safari 中,箭头按钮在悬停时会上下滑动,而不是仅仅悬停——我的猜测是它们被另一个脚本激活了——有没有办法避免冲突?还是只是精灵?
我还没有尝试过使用单独的图片……
谢谢!喜欢你的班卓琴,克里斯!
嗨,维奇!
这看起来像是一个 CSS 问题,动画是由于 CSS3 过渡造成的。因此,尝试替换以下 CSS
.anythingSlider .arrow { display: block; height: 30px; width: 20px; background: url(http://kostov.de/allegro/img/arrows_slide.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 79px; cursor: pointer; }
.anythingSlider .forward { background-position: left top; right: -22px; -webkit-transition-duration: 0; }
.anythingSlider .back { background-position: right top; left: -18px; -webkit-transition-duration: 0; }
.anythingSlider .forward:hover { background-position: left bottom; }
.anythingSlider .back:hover { background-position: right bottom; }
谢谢,Mottie!
我刚醒来后也得出相同的结论:-)
是 CSS3 过渡……!
非常感谢你提供代码!!!我会尝试一下,然后告诉你结果!
我之前就想用精灵重新编写“a”的 CSS……
我应该先做功课,读一下 8 月 12 日 Louis Lazaris 在 Impressivewebs 上发表的文章“使用 CSS3 过渡的动画精灵”……
非常感谢!
再次感谢,Mottie!
两种方法都有效
你对 anythings.slider 的 CSS 和
更改过渡效果会产生相同的结果
a{
color: #e1661e;
text-decoration:none;
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
我会记住以后用!
卡尔·萨根真棒!:-)
优秀的 jQuery 内容滑块,面板大小调整选项非常流畅,非常通用。LT
有用的插件.. 感谢你发布它
哦,非常好。
非常有用。
干得好!
感谢你分享它
与 blueprintcss 框架一起使用时,它无法正确显示。这是一张截图:http://www.flickr.com/photos/54393716@N08/5056143023/
我正在用 mottie 的 v1.43 版本进行测试。
已修复:)……祝大家好运找到解决方法……
骗你的……哈哈哈
问题是 blueprintcss 为有序列表添加了 1.5em 的左侧填充。我相信他们这样做是为了使字体美观并保持对齐。无论如何,只需将当前的 anythingslider.css ul 更改为
ul.anythingBase {
background: transparent;
list-style: none;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding-left: 0;
谢谢!我在最新版本中添加了“padding: 0”:)
衷心感谢你提供滑块,作为一名弱小的开发者,我非常非常感谢它。
然而(哈哈哈,对不起),当我点击前进按钮从面板 3 滑动到面板 1(连续效果)多次时,在 IE7 和 IE8 中,面板 1 似乎“闪烁”,就像它在从面板 3 切换到面板 1 一样,这种现象只会在 1 秒内发生。
奇怪的是,点击后退按钮不会触发问题。
这也发生在演示中的两个滑块上,你可以点击前进按钮从面板 3 滑动到面板 1 多次,在 IE7/IE8 中观察问题。
欢迎提供任何修复建议,谢谢!:)
哎呀,对于面板编号我感到抱歉,我实际上指的是从最后一个面板到第一个面板。
谢谢!
对于“后退按钮”,我的意思是“后退按钮”,哎呀!对于我的垃圾邮件,我感到抱歉 X)
我认为我在最新版本(1.4.5)中修复了这个问题……如果问题仍然存在,请提交一个问题,以便我们能够更好地跟踪它。
谢谢,Mottie,我在 IE7 和 IE8 中测试了 20 次,它工作正常,你真棒!:D
嗨,克里斯。
这是一个很棒的插件,但是我目前在一个自适应网站中使用它,因此如果用户调整窗口大小,设置的宽度将不再有效。
我在 window.resize 上调用一个函数。我几乎通过这样做让它正常工作,但是当尝试在包含类 anythingSlider 的 div 上设置宽度时,一旦在窗口调整大小后重置值,并且滑块移动到下一个幻灯片,它就会将宽度重置为先前值。
所以我想知道这是否可能实现?
我已经将我的代码片段放在下面的函数中。
此致
沃伦:)
function updateCarouselWidth() {
//获取 mainColumn 的宽度
var mainColWidth = $('#mainColumn').width();
//将宽度更新为 mainColWidth - 嗯?!当移动到下一项时,这将再次重置
$('div.anythingSlider').width(mainColWidth);
//计算项目数量 - 例如 3 个 + 2 个克隆项目将是 5 个
var numberOfItems = $('#carousel > li').length;
//将 carousel 的宽度更新为 mainColWidth * numberOfItems
$('#carousel').width(mainColWidth * numberOfItems);
//更新“li”的宽度为 mainColWidth
$('#carousel > li').width(mainColWidth);
//更新“li”内部 div.panel 的宽度为 mainColWidth
$('#carousel > li div.panel').width(mainColWidth);
}
嗨,沃伦·巴克利!
从一开始,这都是滑块的一个问题。在将来的版本中,我可能会将其添加为一个选项……或者只是尝试检测百分比宽度。但是,这是一个使用我 Github 页面上的最新脚本版本进行的工作解决方案的演示。
$(function () {
$('#slider1').anythingSlider({
startStopped : true, // 如果 autoPlay 打开,这可以强制它在停止状态启动
});
var timer;
setSize();
$(window).resize(function(){
clearTimeout(timer);
setTimeout( setSize, 100);
})
function setSize(){
var w = $(window).width() * .8, // 设置为窗口宽度的 80%
as = $('#slider1').data('AnythingSlider'),
leftEdge = 0;
$('.anythingWindow, #slider1 li.panel').closest('div.anythingSlider').andSelf().width(w);
for (var i=0; i < as.pages + 2; i++) {
as.panelSize[i] = [w, as.panelSize[i][1], leftEdge];
leftEdge += w;
}
$('.anythingBase').width(leftEdge + 100);
as.gotoPage(as.currentPage);
}
});
嗨,Mottie
感谢你提供修复方案,非常感谢。
但是我认为这应该成为核心功能的一部分,以使用百分比宽度,以便可以轻松地将其用于自适应布局。
谢谢
沃伦:)
嗨,再次。
我正在考虑将它添加到核心代码中,但我需要一些关于如何实现它的建议(查看此问题:http://github.com/ProLoser/AnythingSlider/issues#issue/18)…… 我个人不喜欢它在调整大小后跳跃的方式,但我认为这无法避免。
喜欢它,Chris~!
我对这个滑块(以及我现在使用的那个)感到很头疼,只有一个关于嵌入的 YouTube 视频的问题。
所以滑块从一个到另一个移动,~平滑~,然后那个火鸡视频出现,所以我点击它。就像菠菜卡在某人的牙齿上一样,我将鼠标光标移离舞台/视频区域。这时,视频继续播放,滑块重新启动,但视频还没有播放完!
我知道(或不知道)YouTube 有一个方法可以通知视频结束,以便我们可以选择重新启动滑块。
下一个选择是在舞台区域周围添加一个包装 div,它会停止滑块(不仅仅是悬停),并监听点击事件,停止滑块。我想这会让我们停滞在那里,然后需要一个(继续)播放按钮。
嗨,Colin!
实际上,此功能已添加,但遗憾的是,它在 IE 中无法正常工作。据我所知,它在其他浏览器中运行良好。我一直试图解决 IE 中的这个问题,但最终可能需要使用 swfobject JavaScript 文件作为必需的插件。
感谢您提供这个很棒的插件!
我有一个小问题:是否可以使滑块具有不同高度的幻灯片?这样,在动画完成之后,滑块会更改其高度以适应当前幻灯片的高度?
感谢您的回复。
我遇到一个问题,在最后一张幻灯片(而且只有最后一张,其他 3 张幻灯片也有类似的 Flash)上,Flash 会短暂显示,然后被备用内容替换。如果我在不工作的幻灯片后面添加一个额外的 <li>(使其成为倒数第二张幻灯片),那么它就会正常工作。您有什么想法吗?查看 这里 的示例。在这个示例中,没有在不工作的幻灯片后面添加额外的 <li>。
谢谢!
应该说是额外的 <li>… 顺便说一句,感谢您提供如此棒的插件。
我认为发生的事情是,当 AnythingSlider 运行时,它会复制音频播放器动态代码“AudioPlayer.embed(“audio_1”, {soundFile: “#”});”,该代码未在额外的面板中初始化。
因此,我认为一个简单的解决方法是在 AnythingSlider 初始化代码之前运行音频播放器脚本(甚至可以将其移到页面底部)。
嗨,Colin!
非常感谢您的分享。这太棒了,它可以在很多很棒的方式中使用。
非常感谢您出色的工作!
此致,
-Warvin
它在 IE 中可以正常工作,但在 Mozilla Firefox 中无法正常工作…… 是我的浏览器(版本 3.5.13)有问题吗?还是它只是“IE 专用”脚本?
嘿,Chris,这个滑块很棒。我最近下载了它,并开始在我的某些网站上使用它的基本功能,主要是为了替换我之前使用 Flash 的内容。我还与我的一些工作同事分享了它,他们也发现了它很棒的用途,能够在一个滑块中拥有不同类型的文件真是太棒了。感谢您提供了一些很棒的演示示例。
这样一个很棒的滑块!即使您只了解少量 HTML 和 CSS 知识,您也可以用它做 任何事情。
在 WordPress 中也很容易使用。
您是如何在 WordPress 中设置它的?它可以在 HTML5 中使用吗?因为我的只是表现得好像 jQuery 没有影响它——显示为一个无样式的列表。
是的,我的浏览器中启用了 JavaScript。
它不是 HTML5。
如果 jQuery 无法正常工作,请确保您引用了正确的文档。
很棒的发现,迫不及待想使用它。
有人可以帮助我解决一个问题吗?我在此页面上放置了 jQuery 滑块
http://www.midians.com/test/index.asp
我在 Opera、FF、Safari、Chrome 和 IE 中测试了它。当然,我在 IE 中遇到了问题。它通常会正常加载,但并非总是如此。有时背景的一部分会丢失。如果它确实正常加载,然后我点击重新加载,它通常不会加载所有背景。只要鼠标移动,其余的背景就会加载。
另外,我忘记提了,如果我屏蔽掉头部的 <script> 标签中包含的 JavaScript 文本(设置参数的代码),则问题不再存在。
嗨,Kelly!
看起来您正在使用 v1.3 与较新的 HTML 模板。从 这里 下载最新版本,并按照这些示例操作(它不再需要名为“anythingSlider”或“wrap”的 div——它会自动添加这些 div)
感谢您的回复。我会试试的!
这个滑块真不错!我喜欢它调整内容大小的方式,我还没有见过其他可以做到这一点的滑块,我肯定会使用它!
有人可以给我一个逐步的说明,甚至让它工作起来吗?
我的显示的是图像的无序列表(自动格式化没有起作用)。我已经启用了 JavaScript。
我尝试在 HTML5 WordPress 主题中使用它——没有成功!这个滑块有没有提供任何说明?
谢谢!
我刚尝试在我的课堂上从 GitHub 下载,但 .zip 文件无法下载。 http://github.com/ProLoser/AnythingSlider/downloads
@Zaka 查看我关于如何安装它的屏幕录制 http://drho.ro/learn-javascript-and-jquery-web-design-tutorials-resources/
我在您的教程网站上留了评论……干得好 :P
我想补充一点,当您初始化 AnythingSlider 时,请确保在代码中包含 themeDirectory,以便其他主题在 WordPress 中正常工作
$('#slider1').anythingSlider({
themeDirectory : '/css/theme-{themeName}.css'
});
糟糕——无法编辑我的上一条评论
$('#slider1').anythingSlider({
themeDirectory : '<?php bloginfo('template_directory'); ?>/css/theme-{themeName}.css'
});
感谢您将改进后的滑块提请我注意。我今晚会试试的。
非常聪明,非常独特,感谢您的分享。
很棒的滑块!我真的很喜欢这个。我肯定会把它用于未来的项目。
这是我见过的最灵活的滑块插件之一——感谢您的工作!
如果您不介意的话,我想提出一些功能请求…
在半透明背景颜色上带有 HTML 友好标题,在加载幻灯片后向上滑动
导航元素的淡入淡出效果
从最后一个幻灯片到第一个幻灯片时,幻灯片反向移动的选项
在过渡效果完成之前,能够点击以切换到下一张幻灯片,以获得更好的用户体验
轻松的子弹或缩略图导航——我想它可能已经可以做到,但提供一些简单选项会很棒
谢谢!
嗨,Tae!
GitHub 上的最新版本包含一个 FX 扩展,其中包含示例,说明如何添加缩略图、内部内容和标题的效果。
关于您其他的功能请求,我不确定您指的是导航元素(导航标签/按钮?)的“简单”子弹或淡入淡出效果。如果您在 Github 仓库中提交一个 issue,我将不胜感激,这样可以更方便地跟踪功能请求和错误。谢谢!
感谢您提供这个很酷的滑块。我已经找了很长时间了。
感谢您的分享。但我有一个“新手”问题。
是否可以编辑导航栏?“Anythingcontrol”或“Anythingwindow”在源代码中隐藏,我找不到“thumbNav”类。我只能在实时代码(Dreamweaver)中看到它们……而且无法编辑!
我想创建一个导航栏来代替实际的……我快绝望了 XD
(我是一个新手!……请不要杀我 ahahahah)
=)
嗨 FaBz!
您是否查看了 AnythingSlider 的“CS-Portfolio”主题?
是否可以使滑块在两组不同的照片/画廊之间切换?比如,用几个标签来点击切换。
嗨 Donny!
我已将此添加为 增强请求。感谢您的建议!
抱歉,我的英语不好,而且我还是新手。
我在我的 WordPress 上安装了它。它只在主页上有效,但在其他页面上出现了问题。请帮我一下。
这是主页,它有效 > hxxp://www.bestpricesdeal.com
而其他页面则出现了这样的问题 > hxxp://www.bestpricesdeal.com/about/
我对 WordPress 不太熟悉,但我不确定您指的是什么问题……是主题吗?您尝试过更改主题目录吗?
$('#slider1').anythingSlider({
themeDirectory : '<?php bloginfo('template_directory'); ?>/css/theme-{themeName}.css'
});
很棒的滑块!有一个快速的问题……如果嵌入到 iframe 中,是否可以控制滑块?也就是说,将滑块放在 iframe 中,而菜单系统在 iframe 外面。
谢谢!
嗨 Stephen,
是的!……花了我一点时间,但我成功地在 演示中实现了这个功能。
嗨,Mottie,这个脚本真的非常棒。在 IE7/8、Firefox 和 Chrome 上测试过。没有任何问题。不是一个错误,但我遇到了一个问题,IE 给了我一些麻烦,当您设置 “buildArrows : false” 和 “toggleArrows : true” 时,IE 会出现 JavaScript 错误并停止。但我有一个问题,我找不到如何防止在点击 . 内的链接时停止动画。
当我点击面板中的链接时,链接会在新窗口中打开,但幻灯片会停止。我可以阻止这种情况吗?
嗨 Kürşad ÇAKIR!
好的,我已经修复了您提到的第一个问题。但我无法理解您在第二个问题中指的是什么 - 您发布的 HTML 缺失。您能否请提交一个带有问题的 issue,并说明您指的是哪种动画 - 面板、箭头、导航面板?谢谢!
感谢您提供这个!
如何创建外部控件?我不太理解您的说明。
谢谢。
m
感谢您提供这个很棒的插件。
我不太确定如何更新滑块,我已经更新了我的 HTML,但刷新页面并没有更新它。
我也不知道如何使用这段代码 - 我应该将我的新代码添加到这里,并将其放在页面顶部,而不是将其添加到页面上的其他 HTML 中吗?
非常感谢,
mike
这是代码
$(‘#slider1’)
.append(”)
.anythingSlider(); // 更新滑块
嗨,
请原谅我的英语不好……
我尝试自定义 AnythingSlider v1.4。
它工作正常,但我希望隐藏幻灯片的数字(在左下方)和开始/停止按钮(在右下方)。
你能帮我一下吗?
非常感谢
嗨,
我使用 AnythingSlider 1.4 制作了一个幻灯片
它将使用 MySQL 查询从数据库中搜索图片。
它运行得很好,但我不知道是否可以在开始幻灯片之前预加载图片(或者至少预加载一些)。
非常感谢
嗨,
我实现了滑块,但出现了一个错误。第一次打开网站时,滑块的第一个位置显示了最后一个位置的内容。
还有其他人遇到过这个错误吗?
嗨,
很棒的滑块工作 ;) 还有很棒的猫头!
不过 - 滑块没有响应?您计划添加一些响应式代码吗?
再见 - 一路顺风