Автоматический вертикальный слайдер контента через плагин Totemticker на jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<script type="text/javascript" src="/js/jquery.totemticker.js"></script> <script type="text/javascript"> $(function(){ $('#vertical-ticker').totemticker({ row_height : '100px', next : '#ticker-next', previous : '#ticker-previous', stop : '#stop', start : '#start', mousestop : true, }); }); </script> <style> #vertical-ticker{ height:400px; width:400px; overflow:hidden; margin:0; padding:0; -webkit-box-shadow:0 1px 3px rgba(0,0,0, .4); } #vertical-ticker li{ padding:35px 20px; display:block; background:#efefef; color:#333; border-bottom:1px solid #ddd; text-align:center; font-size:25px; font-weight:bold; font-family: Helvetica Neue, times, serif; } </style> |
2#: Следующий код туда, где будет сам слайдер:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul id="vertical-ticker"> <li>One Time</li> <li>Baby</li> <li>One Less Lonely Girl</li> <li>Somebody to Love</li> <li>Eenie Meenie</li> <li>Never Say Never</li> <li>U Smile</li> </ul> <a href="#" id="ticker-previous">Назад</a> / <a href="#" id="ticker-next">Вперёд</a> / <a id="stop" href="#">Стоп</a> / <a id="start" href="#">Старт</a> |
