Here is the code of the slider I use now:
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 alt="" width="582" height="255" src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
<li>
<p><img alt="" width="582" height="255" src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
</ul>
</div>
</div>
Here is it working on JSFiddle: http://jsfiddle.net/LUEwg/1/
As you can see it uses jQuery (1.9.1), AnythingSlider (v1.2) and the Easing plugin (from "External Resources"). I'd like to migrate to the latest AnythingSlider version, which is v.1.8.17.
The problem is that my code requires some changes as it's not compatible as-is with AnythingSlider 1.8.17.
Here you can see the diff between old and new version: http://diffchecker.com/3zadzbvc
The major differences in the versions are how the HTML is set up. As you shared above, the original version HTML would be set up as follows (demo):
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>
<p><img alt="" width="582" height="255" src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
<li>
<p><img alt="" width="582" height="255" src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
</ul>
</div>
</div>
in the lastest version, the two div
wrappers are added by the script, so start from the ul
:
<ul id="slider">
<li>
<p><img alt="" width="582" height="255" src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
<li>
<p><img alt="" width="582" height="255" src="IMAGELINK"></p>
<div class="container"><a href="LINK" class="info">TEXT</a></div>
</li>
</ul>
Because of this, the css has been completely rewritten, so include the default css and add the following custom 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;
}
The only change to your javascript was that I added the buildStartStop: false
option instead of using the css: #start-stop { display:none; }