从 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

核心数据和累积的轻量级迁移

iOS 核心数据轻量级迁移

将 Spring Boot 应用程序迁移到最新的 Java 版本 (Java 15)

如何将 gitlab 备份迁移到具有最新 gitlab 版本的新服务器

将所有环境迁移到最新版本后,是不是有理由保留 EF 迁移代码?