title: Change the sliders as per the time of the day
body: <p>I want to show different sliders as per the time of the day. For example from 0-9am 'slider set 1', from 9am-12pm 'slider set 2', and so on. As I am new to java script please help me to solve. I have some code with me which will display different images on different time. Sharing here.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body onload="myFunction()"&gt;
  
  &lt;p id="slider"&gt;&lt;/p&gt;
  
  &lt;script&gt;
  function myFunction() {
  var greeting;
  var time = new Date().getHours();
  if (time&gt;=0 &amp;&amp; time&lt;10) {
      greeting = '&lt;img     src="http://www.devtrix.net/sliderman/demos/demo/img/01.jpg"/&gt;'
  } else if (time&gt;=10 &amp;&amp; time&lt; 12) {
      greeting = '&lt;img src="http://www.devtrix.net/sliderman/demos/demo/img/02.jpg"/&gt;'
  } else if (time&gt;=12 &amp;&amp; time&lt; 16) {
      greeting = '&lt;img src="http://www.devtrix.net/sliderman/demos/demo/img/03.jpg"/&gt;';
  } else if (time&gt;=16 &amp;&amp; time&lt; 20) {
      greeting = '&lt;img src="http://www.devtrix.net/sliderman/demos/demo/img/04.jpg"/&gt;'
  } else {
      greeting = '&lt;img src="http://www.devtrix.net/sliderman/demos/demo/img/05.jpg"/&gt;'
  }
  document.getElementById("slider").innerHTML = greeting;
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>