list scroll with plugin
by Kiran Duggal
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="lista1" class="als-container">
<span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>
<div class="als-container" id="demo1">
<span class="als-prev">
<img src="images/thin_left_arrow_333.png" alt="prev" title="previous" />
</span>
<div class="als-viewport border">
<ul class="als-wrapper">
<li class="als-item">Tab 1</li>
<li class="als-item">Tab 2</li>
</ul>
</div>
<span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>
</div>CSS
/********************************
* generic als elements styling
********************************/
.border
{
border:solid 1px red;
}
.als-container {
position: relative;
width: 100%;
margin: 0px auto;
}
.als-viewport {
position: relative;
overflow: hidden;
margin: 0px auto;
}
.als-wrapper {
position: relative;
list-style: none;
}
.als-item {
position: relative;
display: block;
text-align: center;
cursor: pointer;
float: left;
}
.als-prev, .als-next {
position: absolute;
cursor: pointer;
clear: both;
}
/**************************
* specific als elements
* styling for #lista1
**************************/
#lista1 {
margin: 60px auto 80px auto;
}
#lista1 .als-item {
margin: 0px 30px;
/*min-height: 152px;*/
min-width: 128px;
}
#lista1 .als-item img {
position: relative;
display: block;
vertical-align: middle;
margin-bottom: 8px;
}
#lista1 .als-prev, #lista1 .als-next {
/* top: 58px;*/
top: -5px;
width: 15px;
height: 22px;
}
#lista1 .als-prev {
left: 90px;
}
#lista1 .als-next {
right: 100px;
}JavaScript
/*jquery.als v.1.7 | (c) 2012, 2014 Federica Sibella musings(at)musings(dot)it | http://www.musings.it | MIT license.*/
! function (e) {
function t(e) {
if ("string" == typeof e) {
var t = e.indexOf("_"); - 1 != t && (e = e.substr(t + 1))
}
return e
}
function i(i, o) {
i.preventDefault(), void 0 === o && (o = e(this));
var r = t(o.attr("data-id")),
s = n[r];
s.next.off(), s.prev.off(), s.viewport.off("touchend"), "yes" === s.options.autoscroll && e.fn.als("stop", r), e.fn.als("next", r), "yes" === s.options.autoscroll && e.fn.als("start", r)
}
function o(i, o) {
i.preventDefault(), void 0 === o && (o = e(this));
var r = t(o.attr("data-id")),
s = n[r];
s.prev.off(), s.next.off(), s.viewport.off("touchend"), "yes" === s.options.autoscroll && e.fn.als("stop", r), e.fn.als("prev", r), "yes" === s.options.autoscroll && e.fn.als("start", r)
}
var n = [],
s = 0,
a = {
init: function (t) {
this.each(function () {
var a = {
visible_items: 3,
scrolling_items: 1,
orientation: "horizontal",
circular: "no",
autoscroll: "no",
interval: 4e3,
speed: 600,
easing: "swing",
direction: "left",
start_from: 0
}, l = e(this),
c = l.data("als"),
m = e(),
d = e(),
u = e(),
p = e(),
h = e(),
v = e(),
f = 0,
w = 0,
T = 0,
g = 0,
...