title: Randomly displaying HTML list items in vTicker jQuery plugin?
body: <p>I'm using vertical text slider or scroller jQuery plugin called '<a href="https://richhollis.github.io/vticker/" rel="nofollow noreferrer">vTicker</a>'.</p>
  <p>And I wanted to display the lists randomly but there was no option for this feature in vTicker.</p>
  <p>I posted this question to another forum and someone told me that I can do this on CSS level and using this one.</p>
  <blockquote>
  <p>[...document.querySelectorAll(&quot;li&quot;)].sort(()=&gt;0.5-Math.random()).forEach((e,i)=&gt;e.style.order=i);</p>
  </blockquote>
  <p>but I still have no idea where to apply this correctly.</p>
  <p>So I would like to know how can I do this from this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;
  
  
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;vTicker&lt;/title&gt;
  &lt;meta name="description" content=" "&gt;
  &lt;meta name="keywords" content=" "&gt;
  &lt;link href="https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css" rel="stylesheet"&gt;
  
  &lt;style type="text/css" media="all"&gt;
  body,html
  {
      padding: 0;
      margin: 0;
      text-align: left;
  
  }
  
  body
  {
      background: #000;
      font-family: "NanumSquareRound", sans-serif;
      font-weight: 800;
      font-size: 2.0em;
      letter-spacing: -1px;
  
  }
  
  ul
  {
      list-style: none;
      padding-right: 0px;
      color: white;
     }
  
  &lt;/style&gt;
      
  
  &lt;script type="text/javascript" src="demo_files/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="demo_files/jquery.vticker-min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(function(){
      $('#news-container').vTicker({ 
          speed: 500,
          pause: 1000,
          animation: 'fade',
          mousePause: false,
          showItems: 3
      });
          $('#news-container1').vTicker({
          speed: 700,
          pause: 10000,
          animation: 'fade',
          mousePause: false,
          showItems: 1
      });
  
  });
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="news-container1"&gt;
  
  &lt;ul&gt;
  
  &lt;li&gt;This is the test lines&lt;/li&gt;
  &lt;li&gt;how can we showing these lists randomly?&lt;/li&gt;
  &lt;li&gt;I have been trying to find the answer but I couldn't.&lt;/li&gt;
  &lt;li&gt;Someone gave me a tip that I can do this on CSS level but I still have no idea how to do this.&lt;/li&gt;
  &lt;li&gt;Thank you ahead for answering my question.&lt;/li&gt;
  
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>