3 Simple Touch-enabled News Ticker Plugin
5 Newstape is a really small jQuery text scroller plugin which automatically & vertically scrolls through a list of news feeds with support for mouse wheel, mouse drag and touch swipe events.
7 [DEMO](http://www.jqueryscript.net/demo/Simple-Touch-enabled-News-Ticker-Plugin-Newstape/)
11 Load jQuery library and the jQuery newstape plugin in your html page.
13 <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
14 <script src="jquery.newstape.js"></script>
16 Load the optional jQuery mousewheel plugin for mouse wheel support.
18 <script src="jquery.mousewheel.min.js"></script>
20 Load the optional jquery.event.drag plugin for drag & swipe support.
22 <script src="jquery.event.drag.min.js"></script>
24 Create a basic news ticker as follow.
26 <div class="newstape">
27 <div class="newstape-content">
28 <div class="news-block">
30 <small>13.04.2015</small>
31 <p class="text-justify"> Content 1 ... </p>
32 <div class="text-right"> <a href="#">More</a> </div>
35 <div class="news-block">
37 <small>13.04.2015</small>
38 <p class="text-justify"> Content 2 ... </p>
39 <div class="text-right"> <a href="#">More</a> </div>
42 <div class="news-block">
44 <small>13.04.2015</small>
45 <p class="text-justify"> Content 3 ... </p>
46 <div class="text-right"> <a href="#">More</a> </div>
52 Add your own CSS styles to the news ticker.
55 background-color: #3BB0D6;
66 .newstape-drag { cursor: ns-resize; }
68 .text-center { text-align: center; }
70 .text-right { text-align: right; }
72 .text-justify { text-align: justify; }
74 Call the plugin to start the news ticker.
76 $('.newstape').newstape();
81 $('.newstape').newstape({
89 // mousewheel scrolling
92 // mousewheel offset pixel count
95 // dragging tape content