Index.php

<?php // The part, answering on ajax request
if (isset($_POST['tryForSlide']))
{
  $curSlide = (int)file_get_contents("./slidenumber.txt");
  echo $curSlide;
  die;
}
?>
<!-- Styles -->
<style>
div.slide
{
  width:100px;
  height:100px;
  border:1px solid black;
  display:none;
}
div.slide.visible
{
  display:block;
}
</style>
<!-- JS SCRIPTS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  $(document).ready(function()
  {
    setInterval(tryForSlide,1000);
  });
  function tryForSlide()
  {
    $.post(window.location.href,{'tryForSlide':1}, function(result){
      var num = parseInt(result);
      if (!$('#slide-' + num).hasClass('visible'))
      {
        $('.slide').removeClass('visible');
        $('#slide-' + num).addClass('visible');
        $('#num').text(num);
      }
    })
  }
</script>

<?php // The part, where main page in generated
$curSlide = (int)file_get_contents("./slidenumber.txt");
echo "current active slide: <span id='num'>" . $curSlide . "</span><br>";
$slideData = array(1=>'First slide',2=>'second slide', 3=>'third slide',4=> 'fourth slide');
foreach($slideData as $num=>$slide)
{
  echo "<div class='slide " . ($num==$curSlide ? 'visible' : '') . "' id='slide-$num' >" . $slide . "</div>";
}