tag-slider
Version:
jQuery tag slider with native scroll
50 lines (48 loc) • 1.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tag-slider demo</title>
<link rel="stylesheet" href="tag-slider.css">
<link rel="stylesheet" href="tag-slider-theme.css">
</head>
<body>
<ul class="tagList">
<li>test tag</li>
<li>test tag 2</li>
<li>test tag 3</li>
<li>test tag 4</li>
<li>test tag 5</li>
<li>test tag 6</li>
<li>test tag 7</li>
<li>test tag 8</li>
</ul>
With links:
<ul id="withLinks">
<li><a href="javascript:void(0)">test tag</a></li>
<li><a href="javascript:void(0)">test tag 2</a></li>
<li><a href="javascript:void(0)">test tag 3</a></li>
<li><a href="javascript:void(0)">test tag 4</a></li>
<li><a href="javascript:void(0)">test tag 5</a></li>
<li><a href="javascript:void(0)">test tag 6</a></li>
<li><a href="javascript:void(0)">test tag 7</a></li>
<li><a href="javascript:void(0)">test tag 8</a></li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="tag-slider.js"></script>
<script>
$('.tagList').on('tagSliderInit', (e,slider) => {
//console.log(slider)
});
$('.tagList').on('tagSliderTagSelected', (e ,selected, previous, slider) => {
//console.log(selected, previous, slider);
});
$('.tagList').tagSlider({});
$('#withLinks').tagSlider({
noWrap: true,
center: true,
});
//$('.tagList').tagSlider('test', 'test');
</script>
</body>
</html>