magic-slider


default Settings       external Link [1]  |  external Link [2]  |  external Link [3]

jQuery-Content-Slider based on Coda-Slider and moutardeSlider.

improvements:

  • vertical sliding ... wanna go up and down? .. magic-slider goes vertical or horizontal with or without autoHeight, your choice
  • carousel-mode (invinite-sliding) ... no scroll-back to beginning if you don't want
  • headline changer (for external Titles) ... need an outside Title for youre Slider, here you are! .. ( panelTitle needed! )
  • numbered tabs ... use just numbers or panel-title for the tabs
  • no panel-title needed ... if no panel-title is provided, panel-count is used for tabs
  • external Trigger highlighting ... Now if you want the current externalTrigger is marked as current.
  • slider in slider ... Now its possible to place a slider inside another slider! .. Also rel-linking is reworked.

magic-slider should be fully compatible with coda-slider .. just include the js, change 'coda' to 'magic' in your HTML and CSS. Now everything should work like before and you are ready to include the new features!

$().ready(function() {
   $('#magic-slider-2').magicSlider({
      autoHeight: true,
      carousel: true,
      slideDirection: "vertical",
      changeSliderHeadline: true,
      highlightExternalTrigger: true,
      sliderHeadlineSelector: "#da_slider_head"
   });
});

This is the code for the slider below.

Sample with 1 Panel and hidden Panel-Titel .. this title isn't needed, but usefull if you want tab-links with text or if you want to change a slider-headline like below.

<div class="magic-slider-wrapper">
  <div class="magic-slider" id="magic-slider-1">
    <div class="panel">
      <div class="panel-wrapper">
        <h2 class="title hidden">Panel 1</h2>
        <p>Your-Content.</p>
      </div>
    </div>
  </div>
</div>

also possible: ... ( the structure of coda-slider is not needed anymore .. only for styling )

<div id="slider_one">
  <div>
    Your-Content.
  </div>
</div>

some special settings .. look the code-sample       external Link [1]  |  external Link [2]  |  external Link [3]

I should be changed be js!

jQuery-Content-Slider basierend auf Coda-Slider und moutardeSlider.

Erweiterungen:

  • vertikales sliding ... du willst auf und ab? .. magic-slider arbeitet sowohl vertikal als auch horizontal .. mit und ohne autoHeight!
  • unendlicher Modus ... kein zurück-scroll beim letzten panel, wenn nicht gewünscht
  • Überschrift wechseln ... du brauchst eine externe Überschrift, Bitte sehr! .. ( panelTitle benötigt! )
  • nummerierte tabs ... Nummern oder Titel für die dynamischen Tabs?
  • kein panel-title nötig ... wenn kein panelTitle wird für Tab-Links die Panel-nummer verwendet
  • externe Links hervorheben ... Nun können auch externe Links als aktiv (current) gekennzeichnet werden.
  • slider im slider ... Jetzt ist es möglich einen Slider in einem anderen Slider anzulegen! .. Auch rel-linking ist überarbeitet.

magic-slider soll voll kompatibel zum alten coda-slider sein .. einfach das script implementieren, in HTML und CSS 'coda' gegen 'magic' tauschen. Nun sollte alles wie bisher laufen und du kannst die neuen Funktionen testen / nutzen.

$().ready(function() {
   $('#magic-slider-2').magicSlider({
      autoHeight: true,
      carousel: true,
      slideDirection: "vertical",
      changeSliderHeadline: true,
      highlightExternalTrigger: true,
      sliderHeadlineSelector: "#da_slider_head"
   });
});

Dies ist der Code für diesen Slider. .. mit den neuen Funktionen: changeSliderHeadline, highlightExternalTrigger

Beispiel mit einem Panel und verstecktem Panel-Titel .. dieser ist nicht erforderlich! .. Aber sehr nützlich, um Tab-Links mit Text aus zu statten, oder aber eine Überschrift zu wechseln! (in diesem Beispiel haben die Tabs Text und Überschrift ist aktiv drum nötig!)

<div class="magic-slider-wrapper">
  <div class="magic-slider" id="magic-slider-1">
    <div class="panel">
      <div class="panel-wrapper">
        <h2 class="title hidden">Panel 1</h2>
        <p>Your-Content.</p>
      </div>
    </div>
  </div>
</div>

ebenso möglich: ... ( die alte struktur vom coda-slider ist nicht mehr erforderlich, höchstens fürs styling )

<div id="slider_one">
  <div>
    Your-Content.
  </div>
</div>

autoHeight: false, dynamicTabsContent: count, slideDirection: "vertical"       external Link [2]  |  external Link [3]

Panel 1

Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht?

Panel 2

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.

Panel 3

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.

Panel 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.


autoHeight: false, carousel: true, slideDirection: "horizontal"

Panel 1

Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da es dort wimmele von bösen Kommata, wilden Fragezeichen und hinterhältigen Semikoli, doch das Blindtextchen ließ sich nicht beirren.

Panel 2

Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht?

Panel 3

Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich.

Panel 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.



magic-slider a jquery-content-slider by Austin Strange, based on Coda-Slider and moutardeSlider.