从 AnySlider v1.2 迁移到最新版本 (v1.8.17)
Posted
技术标签:
【中文标题】从 AnySlider v1.2 迁移到最新版本 (v1.8.17)【英文标题】:Migrating from AnythingSlider v1.2 to latest (v1.8.17) 【发布时间】:2013-03-24 02:15:16 【问题描述】:这是我现在使用的滑块的代码:
JAVASCRIPT
function formatText(index, panel)
return index + "";
$(function ()
$('.anythingSlider').anythingSlider(
easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
delay: 5000, // How long between slide transitions in AutoPlay mode
startStopped: false, // If autoPlay is on, this can force it to start stopped
animationTime: 600, // How long the slide transition takes
hashTags: true, // Should links change the hashtag in the URL?
buildNavigation: false, // If true, builds and list of anchor links to link to each slide
pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
startText: "Go", // Start text
stopText: "Stop", // Stop text
navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
);
$("#slide-jump").click(function()
$('.anythingSlider').anythingSlider(5);
);
);
HTML
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>
<p><img src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
<li>
<p><img src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
</ul>
</div>
</div>
它在 JSFiddle 上工作:http://jsfiddle.net/LUEwg/1/
如您所见,它使用 jQuery (1.9.1)、AnythingSlider (v1.2) 和 Easing 插件(来自“外部资源”)。 我想迁移到最新的 AnythingSlider 版本,即v.1.8.17。
问题是我的代码需要进行一些更改,因为它与 AnySlider 1.8.17 不兼容。
在这里您可以看到新旧版本之间的差异: http://diffchecker.com/3zadzbvc
【问题讨论】:
【参考方案1】:版本的主要区别在于 html 的设置方式。正如您在上面分享的,原始版本的 HTML 将设置如下 (demo):
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>
<p><img src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
<li>
<p><img src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
</ul>
</div>
</div>
在最新版本中,两个div
包装器是脚本添加的,所以从ul
开始:
<ul id="slider">
<li>
<p><img src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
<li>
<p><img src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
</ul>
正因为如此,css已经完全重写,所以包含默认css并添加如下自定义css:
/*** Set Slider dimensions here! Version 1.7+ ***/
/* added #slider li to make panels the same size in case "resizeContents" is false */
ul#slider, ul#slider li
width: 589px;
height: 296px;
list-style: none;
.anythingSlider.anythingSlider-default .arrow.forward a
background:url(http://lorenzoraffio.com/images/next.png) no-repeat left top;
right:6px;
.anythingSlider.anythingSlider-default .arrow.back a
background:url(http://lorenzoraffio.com/images/prev.png) no-repeat left top;
.anythingSlider a
color:#706b6b;
.anythingSlider a.info
background:url(http://lorenzoraffio.com/images/marker1.png) no-repeat left 1px;
text-decoration:none;
padding-left:20px;
float:right;
.anythingSlider a.info
background:url(http://lorenzoraffio.com/images/marker1.png) no-repeat left 1px;
text-decoration:none;
padding-left:20px;
float:right;
.anythingSlider a.info:hover
text-decoration:underline;
color:#000;
.anythingSlider p
margin-bottom:0;
.anythingSlider .container
padding:8px 25px 0 22px;
width:auto;
对您的 javascript 的唯一更改是我添加了 buildStartStop: false
选项而不是使用 css:#start-stop display:none;
【讨论】:
谢谢!!它完美地工作。 :) 只是出于好奇,需要将#&panel1-2 附加到文件名吗?有没有办法避免这种情况? 将hashTags
option 设置为false
。你可以找到full documentation here以上是关于从 AnySlider v1.2 迁移到最新版本 (v1.8.17)的主要内容,如果未能解决你的问题,请参考以下文章
将使用 pip 安装的站点包/模块从较旧版本的 python 迁移到较新/最新版本的 python
将 Spring Boot 应用程序迁移到最新的 Java 版本 (Java 15)