JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://lorenzoraffio.com/js/jquery.anythingslider.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="anythingSlider">
<div class="wrapper">
<ul>
<li>
<p>
<img alt="" width="582" height="255" src="http://www.mondo-divertimento.fan-club.it/news/test.gif">
</p>
<div class="container"><a href="" class="info">Info</a>
<p style="color:#555555;text-align:center">text</p>
</div>
</li>
<li>
<p>
<img alt="" width="582" height="255" src="http://www.mondo-divertimento.fan-club.it/news/test.gif">
</p>
<div class="container"><a href="" class="info">Info</a>
<p style="color:#555555;text-align:center">text</p>
</div>
</li>
<li>
<p>
<img alt="" width="582" height="255" src="http://www.mondo-divertimento.fan-club.it/news/test.gif">
</p>
<div class="container"><a href="" class="info">Info</a>
<p style="color:#555555;text-align:center">text</p>
</div>
</li>
</ul>
</div>
</div>
CSS
.anythingSlider {
width: 589px;
height: 296px;
position: relative;
}
.anythingSlider .wrapper {
width: 582px;
overflow: hidden;
height: 296px;
position: absolute;
top: 0;
left: 0;
font-size:12px;
}
.anythingSlider .wrapper ul {
width: 9999px;
list-style: none;
position: absolute;
top: 0;
left: 0;
}
.anythingSlider ul li {
display: block;
float: left;
padding: 0;
height: 296px;
width: 582px;
margin: 0;
}
.anythingSlider .arrow {
display: block;
height: 45px;
width: 22px;
text-indent: -9999px;
position: absolute;
top: 114px;
cursor: pointer;
}
.anythingSlider .forward {
background:url(http://lorenzoraffio.com/images/next.png) no-repeat left top;
right:6px;
}
.anythingSlider .back {
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:hover {
text-decoration:underline;
color:#000;
}
.anythingSlider p {
margin-bottom:0;
}
.anythingSlider .container {
padding:8px 25px 0 22px;
width:auto;
}
#start-stop {
display:none;
}
/*
Prevents
*/
.anythingSlider .wrapper ul ul {
position: static;
margin: 0;
background: none;
overflow: visible;
width: auto;
border: 0;
}
.anythingSlider .wrapper ul ul li {
float: none;
height: auto;
width: auto;
background: none;
}
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);
});
});