Bilderschau und Bannerwechsel

Ich möchte auf meiner Webseite eine Bilderschau und einen Bannerwechsel einfügen. Dazu nutze ich : <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.cycle.min.js"></script>
Habe mal eine Testseite angelegt: http://s201291267.online.de/bilder-schau.htm
Was muss ich in der "jquery.min.js" und in der "jquery.cycle.min.js" ändern damit die Bilder oder Banner von rechts oder links eingeschoben werden ?
Wie muss ich da vorgehen?

Danke!!!

setTimeout(showSlides, 5000); // Change image every 2 seconds

Der Kommentar passt hier nicht zum Code - ich nehme mal an, das Bild soll alle 5 Sekunden wechseln? das heißt, man hat bei 120 Sekunden 24 Bilderwechsel. Ich würde diese einfach mitzählen und showSlides() nur dann wieder aufrufen, wenn die Anzahl der Bilderwechsel die 24 noch nicht erreicht hat

<script>
var numChanges = 0;
var slideIndex = 0;
showSlides();
function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex> slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    numChanges++;
    if (numChanges < 24) {
        setTimeout(showSlides, 5000); // Change image every 5 seconds
    }
}
</script>

noch ein Bitte:

Code-Abschnitte bitte nicht mit dem Kursiv-Button, sondern mit dem Code-Button markieren. Der Code ist dann besser lesbar, u.a. auch weil Einrückungen dann erhalten bleiben :)

Mit der obigen SildeShow hat das leider nicht so klappt weil die Reprosive-Darstellung nicht funktionierte deshalb verwende ich jetzt "jquery.flexslider.js"
Ich möchte nach 20 Bildwiedergaben die SildeShow stoppen.
Was muss ich im JavaScript einfügen ?
http://s201291267.online.de/jquery.flexslider.js
http://s201291267.online.de/mtb-test.htm

Vielen Dank.
Muss ich das Script hier einfügen oder kann es auf der entsprechenden Seite eingefügt werden?

//FlexSlider: Plugin Function
  $.fn.flexslider = function(options) {
    if (options === undefined) options = {};

    if (typeof options === "object") {
      return this.each(function() {
        var $this = $(this),
            selector = (options.selector) ? options.selector : ".slides > li",
            $slides = $this.find(selector);

      if ( ( $slides.length === 1 && options.allowOneSlide === true ) || $slides.length === 0 ) {
          $slides.fadeIn(400);
          if (options.start) options.start($this);
        } else if ($this.data('flexslider') === undefined) {
          new $.flexslider(this, options);
        }
      });
    } else {
      // Helper strings to quickly perform functions on the slider
      var $slider = $(this).data('flexslider');
      switch (options) {
        case "play": $slider.play(); break;
        case "pause": $slider.pause(); break;
        case "stop": $slider.stop(); break;
        case "next": $slider.flexAnimate($slider.getTarget("next"), true); break;
        case "prev":
        case "previous": $slider.flexAnimate($slider.getTarget("prev"), true); break;
        default: if (typeof options === "number") $slider.flexAnimate(options, true);
      }
    }
  };
})(jQuery);

[Edit Jörg: Code in Code-Block eingefügt]