Simpler Slider mit jQuery erstellen – Tutorial

Simpler selbstgemachter Slider mit jQuery
Erstelle einen einfachen Slider mit jQuery

Vor einigen Wochen habe ich einen ganz simplen Slider für ein Projekt benötigt. Dieser sollte für jedes Bild in einem Container ein Listenelement für eine Navigation anlegen. Nach dem Laden der Seite wird nur das erste Bild angezeigt. Klick man dann auf einen der Navigationspunkte, so wird auch das entsprechende Bild, ohne weitere Effekte, eingeblendet. Beim Klick auf das Bild selbst sollte sich das Bild in voller Größe in einer Lightbox öffnen. Das wird aber nicht weiter in diesem Artikel behandelt.

Es gibt sicherlich unzählige sehr gute Slider im Internet, jedoch brauchte ich nur einen Bruchteil der Funktionen, die solch ein Slider meistens mit sich bringt. Also habe ich eine kleine Funktion geschrieben. Und später mich dazu entschlossen diese zu einem vollwertigem jQuery Plugin zu erweitern, sodass man diese jetzt noch einfacher verwenden kann.

Hier findet ihr die Demo-Seite.

Dabei gehe ich von der folgenden HTML-Struktur aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<section class="slider">
  <ul class="slides">
    <li><img src="http://dummyimage.com/200x150/0ff/000" alt="Bild 1" /></li>
    <li><img src="http://dummyimage.com/200x150/0f0/000" alt="Bild 2" /></li>
    <li><img src="http://dummyimage.com/200x150/f00/fff" alt="Bild 3" /></li>
  </ul>
</section>
 
<section class="slider">
  <ul class="slides">
    <li><img src="http://dummyimage.com/200x150/00f/fff" alt="Bild 1" /></li>
    <li><img src="http://dummyimage.com/200x150/0f0/000" alt="Bild 2" /></li>
    <li><img src="http://dummyimage.com/200x150/f00/fff" alt="Bild 3" /></li>
  </ul>
</section>

Als erstes suchen wir eine Liste mit den einzelnen Slider-Elementen in dem selektierten Container. Nach dieser Liste wir eine neue Liste für die Navigation eingefügt und alle Slides werden ausgeblendet. Anschließend wird das erste Element wirder eingeblendet.

21
22
23
24
25
26
27
this.each(function() {
  var slider = $(this);
  var slides = slider.find('ul').addClass('slides').after('<ul class="'+ config.css_class+'"></ul>').children().hide();
 
  slider.find(':first-child').show();
  // [...]
});

Dann muss für jede Slide ein eigener Navigationspunkt erzeugt werden. Das wird in der folgenden Schleife gemacht. Dabei erhält jedes Listenelement ein data-Attribut mir dem Index des Slider-Elements. Der erste Navigationspunkt erhält zusätzlich die Klasse active.

29
30
31
32
33
34
35
36
this.each(function() {
  // [...]
  $.each(slides, function(index, value){
    slider.find('.'+config.css_class).append('<li class="controller item-'+ index +'" data-id="'+ index +'">&nbsp;</li>');
  });
  $('.item-0').addClass('active');
  // [...]
});

Nun müssen wir nur noch dafür sorgen, dass beim Klick auf einen Navigationspunkt das Bild ausgetauscht wird. Wird ein klick getätigt, so wird das data-Attribut ausgelesen, alle Slider-Elemente ausgeblendet und das Element mit dem Index, entsprechend dem data-Attribut, eingeblendet.

35
36
37
38
39
40
41
42
43
44
45
this.each(function() {
  // [...]
  slider.on('click', '.controller', function(e) {
    var controller = $(this).addClass('active');
 
    slides.hide().eq(controller.data('id')).show();
    slider.find('.controller').removeClass('active');
    controller.addClass('active');
  });
 
});

Jetzt fehlt nur noch ein bisschen CSS und die ganze Sache schaut super aus.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
ul, ul li, section {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
 
.slider {
  margin: 25px 0;
  text-align: center;
}
.slider .slides li {
  margin-bottom: 5px;
}
 
.slider-controller {
  padding: 0;
}
 
.slider-controller li {
  display: inline-block;
  border: 1px solid #C0C0C0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #fff;
  margin-right: 5px;
  height: 8px;
  width: 8px;
  cursor: pointer;
}
 
.slider-controller li.active {
  background: #008bd6;
  background: -moz-linear-gradient(top,  #008bd6 0%, #007abd 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008bd6), color-stop(100%,#007abd));
  background: -webkit-linear-gradient(top,  #008bd6 0%,#007abd 100%);
  background: -o-linear-gradient(top,  #008bd6 0%,#007abd 100%);
  background: -ms-linear-gradient(top,  #008bd6 0%,#007abd 100%);
  background: linear-gradient(top,  #008bd6 0%,#007abd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bd6', endColorstr='#007abd',GradientType=0 );
}
Hier findet ihr die Demo-Seite und auch den Download.
ALL-INKL.COM