magic-slider


default Settings       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

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,
      sliderHeadlineSelector: "#da_slider_head"
   });
});

This is the code for the slider 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>

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

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

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

default Settings       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

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,
      sliderHeadlineSelector: "#da_slider_head"
   });
});

This is the code for the slider 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>

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

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

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

autoHeight: true, carousel: true, slideDirection: "vertical", changeSliderHeadline: true       external Link [2]  |  external Link [3]

I should be changed be js!

Panel 1

Ü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 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

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, 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.