Automatyczne przewijanie obrazków - rotator w CSS3

Siemka, chciałbym dodać automatyczne przewijanie obrazków do rotatora, który został wykonany tylko w HTML oraz CSS3. Nie mam zielonego pojęcia jak to dodać, coś czytałem o timeout ale dużo z tego nie rozumiem.

Rotator: http://codepen.io/robdodson/pen/rCGvJ

http://codepen.io/anon/pen/gziBd

A jeżeli chodzi o system CMS to gdzie wrzucić kod? W jakieś znaczniki czy co?

Pomiędzy:

<script></script>

Starałem się ukryć kropki (musiałem na 100% zmienić ich nazwę bo się gryzło z innym kodem CMS ale i tak chcę je usunąć) no i zrobiłem jak zrobiłem. Wyświetla się, jednak treść nie jest automatycznie przewijana, a na stronie CodePen jak tak zrobiłem to działało.

Livedemo:  http://www.nauka-rp....dex.php?/index 

Tuż pod menu.

Kod HTML:

<div class="ipsSideBlock clearfix">
<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="http://gfxcms.eu/hosting/upload/images/erwszy_konkurs_2.png">
        <img src="http://gfxcms.eu/hosting/upload/images/rekrutacja.png">
      </div>
    </div>
  </div>
  <label for="slide1" id="slide"></label>
  <label for="slide2" id="slide"></label>
</div></div>
<script>
    var pagination = $('label#slide'),
    delay = 3000,
    idx = 0,
    auto = true;
if (auto == true) {
  setInterval(function() {
    if (idx == pagination.length) {
      idx = 0;
    }
    $('label#slide').eq(idx).trigger('click');
    idx = idx + 1;
  }, delay);
};
</script>

Kod CSS:

#slider {
  width: 100%;
  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 {
  ;
}

#slide3:checked ~ #slides .inner {
  ;
}

#slide4:checked ~ #slides .inner {
  ;
}

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

kropka {
  background: #CCC;
  display: inline-block;
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

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

Jesli usuniesz 'kropki' to nie zadziała, ponieważ podpiąłem sie pod nie. Ukryć możesz kropki poprzez display: none; i zmienić ID dla nich.

Demo: http://codepen.io/anon/pen/qLtay

Coś z kodem javascript, znaczy jego wywołaniem, wrzucałem do kodu tam gdzie znajduje się rotator - brak reakcji, wrzucałem do szablonu includejs - brak reakcji.

Sprawdź jeszcze to: http://codepen.io/anon/pen/tBzfJ a jeśli nie zadziała to sprawdz w konsoli [F12] czy masz jakieś błędy.

A idzie jakoś usunąć w ogóle ten kod w CSS odnośnie labela? Bo na IPB są podpisane pod niego np. w ckeditorze, edycji ustawień profilu i jak dam display;none to mi znikają wtedy tamte napisy, a jak są te kropki zdefiniowane to wtedy 1 litera zdania jest na tle szarej kropki >.<

Skopiowałem tylko i wyłącznie kod JS, nie działa wciąż. W konsoli jest jakiś błąd ale raczej nie dotyczy rotatora.

http://www.nauka-rp....ndex.php?/index

//edit: Jak wrzuciłem do szablonu includejs (szablon z kodami JS) to wywala jakiś błąd odnośnie funkcji, jeżeli wrzucam tam gdzie kod html to nic.

Użytkownik MixTape edytował ten post 06 października 2014 - 22:29

Działa, dzięki za tyle poświęconego czasu