New autoplay option

vaakash · vaakash · commit 3e4c5a6fb46d · 2022-01-22T23:51:17.000+05:30
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{

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "jquery-easy-ticker",`
`3`		`- "version": "3.4.0",`
	`3`	`+ "version": "3.5.0",`
`4`	`4`	`"description": "jQuery easy ticker plugin allows to add news ticker like scroll to list elements",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"build": "grunt"`