Problemy z rotacją zdjęć na stronie, brak ruchu zdjęć.

pytanie zadane 11 marca 2019 w HTML i CSS przez adamon Nowicjusz (160 p.)
edycja 11 marca 2019 przez ScriptyChris

Proszę o pomoc w sprawie programu:

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="pl-pl" />
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <link href="styl.css" rel="stylesheet" type="text/css" />
        <title>Rotator Demo</title>
<script type="text/javascript">

(function($) {
  var pagination = $('label#slideLabel'),
    delay = 3000,
    idx = 0,
    auto = true;

  if (auto == true) {
    setInterval(function() {
      if (idx == pagination.length) {
        idx = 0;
      }
      pagination.eq(idx).trigger('click');
      idx = idx + 1;
    }, delay);
  };
})(jQuery)

</script>
</head>
<body>

<div id="slider">
  <input checked="" type="radio" name="slider" id="slide1" selected="false">
  <input type="radio" name="slider" id="slide2" selected="false">
  <input type="radio" name="slider" id="slide3" selected="false">
  <input type="radio" name="slider" id="slide4" selected="false">
  <div id="slides">
    <div id="overflow">
      <div class="inner">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/rock.jpg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/grooves.jpg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/arch.jpg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/sunset.jpg">
      </div>
    </div>
  </div>
  <label for="slide1" id="slideLabel"></label>
  <label for="slide2" id="slideLabel"></label>
  <label for="slide3" id="slideLabel"></label>
  <label for="slide4" id="slideLabel"></label>
</div>

</body>

</html>

Do niego jest plik css:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#slider {
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

#overflow {
  width: 100%;
  overflow: hidden;
}

#slides .inner {
  width: 400%;
}

#slides .inner {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);

  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#slides img {
  width: 25%;
  float: left;
}

#slide1:checked ~ #slides .inner {
  margin-left: 0;
}

#slide2:checked ~ #slides .inner {
  margin-left: -100%;
}

#slide3:checked ~ #slides .inner {
  margin-left: -200%;
}

#slide4:checked ~ #slides .inner {
  margin-left: -300%;
}

input[type="radio"] {
  display: none;
}

#slideLabel {
  display: none;
}

#slide1:checked ~ label[for="slide1"],
#slide2:checked ~ label[for="slide2"],
#slide3:checked ~ label[for="slide3"],
#slide4:checked ~ label[for="slide4"] {
  background: #333;
}

Powinien działać jak na stronie:

https://codepen.io/anon/pen/tBzfJ

A działa tak:

http://serwer1871943.home.pl/

Pokazuje się jedno zdjęcie i to bez ruchu. Dziękuję za dokładne odpowiedzi.