jQuery – 10 – Simpler Content Slider

Die Content Slider gibt es zwar auch schon wie Sand am Meer .. aber ich brauch das gerade für ein privates Projekt .. und wenn ich Zeit habe bau ich dann doch am liebsten selbst .. man könnte ja was lernen 🙂

Sinnvoll ist das Script wenn ihr auf sehr beschränktem Platz doch recht viel Informationen unterbringen wollt und es nicht ganz so wichtig ist das alles gleich am Anfang zu sehen ist.

Die Sildes sind als gewöhnliche DIVs definiert die horizontal floaten. Die rechte Kontrollfläche verschwindet wenn keine weiteren Slides mehr folgen bzw. die linke Kontrollfläche ist initial nicht zu sehen.

Hier findet ihr den Quelltext des Simplen Content Slider.

Hier nochmal das Script im Ganzen

$(document).ready(function(){
  var curPos = 0;
  var slideWidth = 630;
  var slides = $(’.slide’);
  var countSlides = slides.size(); 
  var controlLeft = $(’#controlLeft’);
  var controlRight = $(’#controlRight’);  
  var floatZone = $(’.floatZone’);

/* Breite des Bereichs */ floatZone.css(‘width’, slideWidth * countSlides); /* Click abfangen */ $(’.control’).bind(‘click’, function() { /* Aktuelle Position bestimmen */ if ($(this).attr(‘id’) === ‘controlLeft’) { curPos = curPos-1; } else { curPos = curPos+1; } /* Linken Kontrollbereich ein und ausblenden */ if (curPos === 0) { controlLeft.hide() } else { controlLeft.show() } /* Rechten Kontrollbereich ein und ausblenden */ if (curPos === countSlides-1) { controlRight.hide() } else { controlRight.show() } /* Slides wechseln */ floatZone.animate({ ‘marginLeft’ : slideWidth*(-curPos) }); }); });

CSS, JavaScript und HTML findet ihr dieses mal schön kompakt zum nachmachen in einer Datei.

Leave a Reply

Your email address will not be published. Required fields are marked *