New autoplay option

vaakash · Jan 22, 2022 · 3e4c5a6 · 3e4c5a6
1 parent 3bc0ffd
commit 3e4c5a6
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ jQuery easy ticker is a news ticker like plugin which scrolls a list infinitely.
 * The speed of the transition can be changed.
 * Controls can be added in order to Play/pause or move the list up and down.
 * Cross browser support.
-* Light weight (2.82 KB - minified).
+* Light weight (2.86 KB - minified).
 
 ## Usage
 
@@ -68,6 +68,7 @@ $(document).ready(function(){
         height: 'auto',
         visible: 0,
         mousePause: true,
+        autoplay: true,
         controls: {
             up: '',
             down: '',

diff --git a/dist/jquery.easy-ticker.min.js b/dist/jquery.easy-ticker.min.js
diff --git a/easyticker.jquery.json b/easyticker.jquery.json
@@ -14,7 +14,7 @@
 		"vertical",
 		"easing"
     ],
-    "version": "3.4.0",
+    "version": "3.5.0",
     "author": {
         "name": "Aakash Chakravarthy",
         "url": "https://www.aakashweb.com/"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jquery-easy-ticker",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "jQuery easy ticker plugin allows to add news ticker like scroll to list elements",
   "scripts": {
     "build": "grunt"

diff --git a/src/jquery.easy-ticker.js b/src/jquery.easy-ticker.js
@@ -1,5 +1,5 @@
 /*
- * jQuery - Easy Ticker plugin - v3.4.0
+ * jQuery - Easy Ticker plugin - v3.5.0
  * https://www.aakashweb.com/
  * Copyright 2022, Aakash Chakravarthy
  * Released under the MIT License.
@@ -16,6 +16,7 @@
             height: 'auto',
             visible: 0,
             mousePause: true,
+            autoplay: true,
             controls: {
                 up: '',
                 down: '',
@@ -92,6 +93,15 @@
 
         function start(){
 
+            if(!s.opts.autoplay)
+                return;
+
+            startForce();
+
+        }
+
+        function startForce(){
+
             if(s.timer != 0)
                 return;
 
@@ -100,8 +110,9 @@
             }, s.opts.interval);
 
             $(s.opts.controls.toggle).addClass('et-run').html(s.opts.controls.stopText);
+
         }
-        
+
         function stop(){
             clearInterval(s.timer);
             s.timer = 0;
@@ -244,7 +255,7 @@
         return {
             up: function(){ moveDir('up'); },
             down: function(){ moveDir('down'); },
-            start: start,
+            start: startForce,
             stop: stop,
             options: s.opts
         };

diff --git a/test/test.html b/test/test.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>jQuery Easy ticker test</title>
   </head>
-  <body>
+  <body style="max-width: 700px">
 
 <script src="../node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="../src/jquery.easy-ticker.js"></script>
@@ -20,6 +20,7 @@
         height: 'auto',
         visible: 1,
         mousePause: true,
+        autoplay: true,
         controls: {
             up: '.up',
             down: '.down',
@@ -88,6 +89,12 @@
         $('.t5Wrap').fadeToggle();
     });
 
+    var ticker6 = $('.myTicker6').easyTicker({
+        interval: 2000,
+        visible: 3,
+        autoplay: false
+    });
+
 });
 </script>
 
@@ -152,7 +159,7 @@ <h2>Ticker 5</h2>
 <button class="t5Btn">Toggle</button>
 <div class="t5Wrap">
     <div class="myTicker5">
-        <ul style="width:100px">
+        <ul>
             <li>Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
             <li>List 2</li>
             <li>This trick requires only div tags and some CSS works. To get this trick, just use the code below. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
@@ -163,7 +170,17 @@ <h2>Ticker 5</h2>
     </div>
 </div>
 
-<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam cum, non in dolore doloribus voluptatibus ullam nisi deleniti facere reprehenderit animi, magnam quod necessitatibus illo reiciendis beatae expedita labore qui!</p>
+<h2>Ticker 6</h2>
+<div class="myTicker6">
+    <ul>
+        <li>Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+        <li>List 2</li>
+        <li>This trick requires only div tags and some CSS works. To get this trick, just use the code below. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+        <li>List 4</li>
+        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum porro quod nostrum est quos, rerum possimus voluptas exercitationem atque, vel fugiat nobis praesentium animi iure necessitatibus reprehenderit. Pariatur, tempore officia.</li>
+        <li class="last-item">Hey... Triangles can be made easily using CSS also without any images. This trick requires only div tags and some CSS works. To get this trick, just use the code below.</li>
+    </ul>
+</div>
 
 <style>
 .myTicker{