Verena: Slider

Hallo und guten Abend,

ich suche vezweifelt einen Slider für meine Webseite. Wollte erst diesen nehmen

http://www.slidesjs.com/examples/basic/

Würde auch passen, aber ich benötige einen Slider der dieses kann

  • In einem DIV wird ein Bild dargestellt
  • Darunter gibt es zwei Buttons (Vor und zurück)
  • Darunter sollt es eine Anzeige geben die mir "Image 2 of 3" z.B. anzeigt. Klickt man weiter änbdert sich die Zahl.

Hab bis jetzt keinen gefunder der das kann. Habt Ihr eine Idee oder kann man den von mir verlinken etwas umgestallten?

  1. @@Verena:

    nuqneH

    • In einem DIV wird ein Bild dargestellt
    • Darunter gibt es zwei Buttons (Vor und zurück)

    Ich würde mir mal Swipe ansehen. Das tut, was es soll – mit Unterstützung von Touch-Geräten. Und ohne jQuery.

    • Darunter sollt es eine Anzeige geben die mir "Image 2 of 3" z.B. anzeigt. Klickt man weiter änbdert sich die Zahl.

    Dafür gibt’s die Methoden getPos() und getNumSlides().

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Ich würde mir mal Swipe ansehen. Das tut, was es soll – mit Unterstützung von Touch-Geräten. Und ohne jQuery.

      Danke für den Link. Sieht sehr gut aus ABER ich habe dort sehr viele DIVS

        
      <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>  
        <div class='swipe-wrap'>  
          <div><b>0</b></div>  
          <div><b>1</b></div>  
          <div><b>2</b></div>  
          <div><b>3</b></div>  
          <div><b>4</b></div>  
          <div><b>5</b></div>  
          <div><b>6</b></div>  
          <div><b>7</b></div>  
          <div><b>8</b></div>  
          <div><b>9</b></div>  
          <div><b>10</b></div>  
          <div><b>11</b></div>  
          <div><b>12</b></div>  
          <div><b>13</b></div>  
          <div><b>14</b></div>  
          <div><b>15</b></div>  
          <div><b>16</b></div>  
          <div><b>17</b></div>  
          <div><b>18</b></div>  
          <div><b>19</b></div>  
          <div><b>20</b></div>  
        </div>  
      </div>  
      
      

      ist doch etwas übertrieben?

      Dafür gibt’s die Methoden getPos() und getNumSlides().

      Ich finde leider keine Anleitung. Wie wendet man diese beide Methoden an, dass ich etwas auf dem Bildschirm sehe?

      1. @@Verena:

        nuqneH

        Ich finde leider keine Anleitung. Wie wendet man diese beide Methoden an, dass ich etwas auf dem Bildschirm sehe?

        Quick and dirty:

        Du siehst im Markup Elemente zur Ausgabe vor:

        <div><span id="pos"></span> von <span id="numSlides"></span></div>  
        
        

        Nach der Initialisierung des Swipe-Objekts befüllst du die:

        var posElem = document.getElementById('pos'),  
            numSlidesElem = document.getElementById('numSlides');  
          
        posElem.innerHTML = window.mySwipe.getPos() + 1;  
        numSlides.innerHTML = window.mySwipe.getNumSlides() + 1;
        

        Die Änderung der Nummer des aktuell angezeigten Bildes übernimmt die Callback-Funktion, die du bei der Initialisierung mit angibst:

        window.mySwipe = new Swipe(document.getElementById("…"), {callback: function(index, elem) { posElem.innerHTML = index + 1; },});
        

        +1 deshalb, weil index von 0 bis N-1 zählt.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Danke für deine Hilfe. Hab es eingebunden und es geht fast

            
          <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>  
            <div class='swipe-wrap'>  
              <div><b>1</b></div>  
              <div><b>2</b></div>  
              <div><b>3</b></div>  
            </div>  
          </div>  
            
          <div style='text-align:center;padding-top:20px;'>  
            
            <button onclick='mySwipe.prev()'>prev</button>  
            <button onclick='mySwipe.next()'>next</button>  
            
          </div>  
            
            
          <div><span id="pos"></span> von <span id="numSlides"></span></div>  
          
          
            
          <script src='swipe.js'></script>  
          <script>  
            
          // pure JS  
          var elem = document.getElementById('mySwipe');  
            
          window.mySwipe = Swipe(elem, {  
            // startSlide: 4,  
            // auto: 3000,  
            // continuous: true,  
            // disableScroll: true,  
            // stopPropagation: true,  
            callback: function(index, element) {  
          	posElem.innerHTML = index + 1;  
          	  },  
            // transitionEnd: function(index, element) {}  
          });  
            
          var posElem = document.getElementById('pos'),  
            
          numSlidesElem = document.getElementById('numSlides');  
            
          posElem.innerHTML = window.mySwipe.getPos() + 1;  
          numSlides.innerHTML = window.mySwipe.getNumSlides() + 1;  
            
          </script>  
          
          

          Ich sehe auf dem Bildschirm 1 von 4 ist nicht richtig, es muss 1 von 3 heißen. Woher kommt der vierte? Und brauch ich wirklich so viele DIVs?

          1. @@Verena:

            nuqneH

            Ich sehe auf dem Bildschirm 1 von 4 ist nicht richtig, es muss 1 von 3 heißen. Woher kommt der vierte?

            Mein Fehler. Bei window.mySwipe.getNumSlides() ohne +1.

            Und brauch ich wirklich so viele DIVs?

            Es können auch andere Elemente als div sein (zumindest die Container, bei den inneren bin ich mir gerade nicht sicher), nur die Klassen müssen diese Namen haben. Aber ja, die Elemente brauchst du.

            Kannst ja mal probieren, ob’s mit

            <figure id='mySwipe' class='swipe'>  
              <ol class='swipe-wrap'>  
                <li>1</li>  
                <li>2</li>  
                <li>3</li>  
              </ol>  
            </figure>
            

            auch geht.

            Die b-Elemente brauchst du nicht. Und Stilangaben ins Stylesheet, nicht inline in style-Attribute.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Mein Fehler. Bei window.mySwipe.getNumSlides() ohne +1.

              Vielen Dank für deine Hilfe nun geht es. Und dieser Slider geht auch auf einem Handy? Kann es leider nicht testen da ich kein Handy habe (ja auch das gibt es).

              Es können auch andere Elemente als div sein (zumindest die Container, bei den inneren bin ich mir gerade nicht sicher), nur die Klassen müssen diese Namen haben. Aber ja, die Elemente brauchst du.

              Ok, das werde ich morgen früh testen. Hab ja noch bis Mittwoch frei ;)