blattertech informatikLukas BlatterNiederlenzerstrasse 21
5600 Lenzburg/AGSwitzerland

079 569 25 90
https://www.blattertech.ch

Adresse anzeigen

Einfacher Slider mit jQuery

15. August 2016 |  CMS MADE SIMPLE |  WEBDESIGN |  JQUERY2 Kommentare

Auf Stack Overflow habe ich vor kurzem einen einfachen Slider entdeckt. Der Slider nutzt jQuery ohne weitere Plugins.

<html>
<head>
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans;
}
.track {
  position: relative;
  height: 400px;
  width: 100%;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.ipsum {
  display: inline-block;
  padding: 10px;
  background-color: rgba(255, 255, 255, .75);
}
</style>

</html>
<body>
<div class="jCaroFade track">
  <!-- Slides -->
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/550/20180902929_88c507f552_h.jpg');">
    <p class="ipsum">SLIDE ONE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/277/19726574813_cf2aa22221_b.jpg');">
    <p class="ipsum">SLIDE TWO</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/488/20178281609_c1e34be0b2_b.jpg');">
    <p class="ipsum">SLIDE THREE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/414/19744665244_c099ce816c_h.jpg');">
    <p class="ipsum">SLIDE FOUR</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>$('.jCaroFade').each(createFader);

function createFader(i, elem) {
  var track = $(elem);
  var firstSlide = track.find('.slide').eq(0);
  var loop = 0;

  firstSlide.nextAll().hide();
  setInterval(function() {
    loop++;
    firstSlide = firstSlide.fadeOut(500, function() {
        $(this).appendTo(track);
      })
      .next()
      .fadeIn(500);
  }, 3000);

}
</script>
</body>
</html>


Eine Demo des Sliders kann auf jsFiddle angeschaut werden.

Über den Autor:

Lukas Blatter

bloggt und twittert seit 2009 aus Leidenschaft diverse Themen rund um Webdesign, PHP, TYPO3, CMS Made Simple, Computer und weiteres.

Er ist Gründer und Inhaber von blattertech informatik, Ehemann und Vater einer Kinderschar.

Kommentare

Manuelles Weiterschalten
30. Oktober 2016 von COR9
Danke für den Tipp, habe diesen Slider nun schon mehrfach eingesetzt, nun kommen aber zwei Fragen auf: Lassen sich manuelle Weiterschalter integrieren (Bullets mit der Anzahl der Bilder)? Kann man irgendwie von Fade auf Slide umstellen?
Re: Manuelles Weiterschalten
31. Oktober 2016 von Lukas Blatter
Hallo COR9
Das ist sicher möglich. Dazu müsste das Javascript um weitere Funktionen ergänzt werden, welche das manuelle Sliden und die Art der Übergangs steuern.

In deinem Fall würde ich nicht lange versuchen das Script aufzubohren, sondern eher auf einen bewährten Slider zurückgreifen, welcher dir alle gewünschten Möglichkeiten bietet. Der oben genannte macht aus meiner Sicht nur Sinn, wenn möglichst spartanisch gearbeitet werden kann.

Auf Grund des hohen Spamaufkommens können zu diesem Beitrag keine Kommentare mehr abgegeben werden