Ankündigung

Einklappen
Keine Ankündigung bisher.

Mit nem Anfänger Schritt für Schritt nen Slider bauen...

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Mit nem Anfänger Schritt für Schritt nen Slider bauen...

    Hallo Leute,
    ich habe mir in den Kopf gesetzt, jQuery soweit zu beherrschen, dass ich hier und da mal ein kleines Scipt schreiben kann. Mein Problem ist aber, dass ich einfach das Grundgerüst nicht in meinen Schädel bekomme. Wenn ich ein Script sehe kann ich zwar nachvollziehen (meistens) was es mach, aber selber schreiben? Nee, wird nix. Ich hab sogar schon ein Buch durchgearbeitet, aber auch das hat nicht all zu viel gebacht. Ich brauche einfach Beispiele, die ich auch wirklich in der Praxis nachvollziehen kann. PHP habe ich z.B. gelernt, indem ich einen Internetshop gebaut habe.
    Den Shop will ich nun, nach 10 Jahren, komplett umbauen - eben auf mit jQuery. Dafür brauche ich jetzt beispielsweise einen Slider. Ein fertiges PlugIn habe ich zwar schon eingebaut, aber ich brauche noch einen ganz einfachen. Dazu habe ich ein Tutorial im Internet gefunden und das will ich eben von Grund auf nachvollziehen können. Offenbar hat das Script ohnehin ein paar Fehler, denn es funktioniert nicht. Die Gelegenheit, es Zeile für Zeile durchzugehen.
    Hat jemand von Euch Lust dazu, mir zu helfen? Würde mich echt freuen.

    Zwei Fragen zu Anfang:
    Code:
    var $simpleSlider = jQuery( '#slider' ),
         sliderWidth = $simpleSlider.parent().width(),
         sliderItems = $simpleSlider.find( 'li' ).size(),
    Was passiert in der ersten Zeile und müsste es nicht heißen jQuery( '#key' ) ??? Und die dritte Zeile wird mir in den Webentwicklertools als Fehler (keine Funktion) angezeigt.


  • #2
    Ich finde den Slider Mist. Ich bekomme den nur zu laufen wenn man da einiges ändert .Weiß auch nicht was das soll
    Zitat von rabab Beitrag anzeigen
    [/CODE]
    Was passiert in der ersten Zeile und müsste es nicht heißen jQuery( '#key' ) ??? Und die dritte Zeile wird mir in den Webentwicklertools als Fehler (keine Funktion) angezeigt.
    Wenn ich das Tutorial richtig verstehe muss es #slider heißen. DerFehler kommt wegen size(). Wenn ich das weg lasse gehtes schon etwas. Trotzdem funktioniert das floaten da auch irgendwie nicht.

    Bevor ich mich da drüber auf rege und noch was falsches erkläre kuck doch mal hier
    https://codepen.io/basti1012/pen/mGBwOa
    Vieleicht verstehst du das da besser und er funktioniert auch ohne Fehler meldungen


    EDIT:
    Sorry habe was übersehen

    So geht auch dein Slider richtig.
    size() ist bei den neueren Jquery Versionen veraltet. Dazu müßtest du eine alte Jquery Version einbinden damit es geht.
    Bei Jquery 3.0 oder höher tausche size() in length aus und dann geht dein Script auch.
    https://codepen.io/basti1012/pen/GXMvmo
    Mein soforthilfe Forum und Chat

    Kommentar


    • #3
      Der kommt mir bekannt vor, aber noch, als ich einen komplett übernehmen wollte. Daher hat er mir vom Design nicht so gefallen. Scheint aber wirklich nicht zu kompliziert zu sein, werde ihn mir mal in Ruhe angucken. Danke Dir

      Kommentar


      • #4
        Etwas selber recherchieren sollte aber schon drinliegen, nicht?

        https://api.jquery.com/size/#size

        version deprecated: 1.8, removed: 3.0


        Anstelle jQuery('#irgendwas') kannst du auch $('#irgendwas') verwenden.

        Kommentar


        • #5
          Das mit jQuery und $ wusste ich (ganz stolz bin). Auch das size() vielleicht nicht mehr existiert ist mir durch den Kopf gegangen. Aber ich hatte eine Seite, da wurde das noch angeboten. Ich weiß eben noch nicht mal, wo ich am besten suchen soll. MIr ist auch aufgefallen, dass weiter unten im Code .bind statt .on steht. Daher war mir klar, dass das schon etwas älter ist.
          Aber ich denke, mit dem neuen Code von basti1012 komme ich besser klar. Hoffe ich Werde mich aber mit Sicherheit doch noch ein paar mal hier melden.

          Kommentar


          • #6
            Da du ja Jquery lernen willst ist die Seite die jonas3344 gepostet hat ganz gut um einige Sachen nach zu kucken. Da steht es auch bei was alt ist und geändert wurde.
            Wenn du da kuckst siehst du auch das bei der demo size() noch funktioniert .Das liegt aber dadran das die da noch Jquery 1.10 nutzen und nicht mehr die neuen 3.0 und mehr.
            Ich selber nutze auch viel Jquery,doch wenn man mal so durch die Foren goggelt gibt es auch viele Leute die sagen das man Jquery gar nicht mehr brauch und gleich was neueres lernen soll.
            Aber das ist wohl wieder ein Thema was jeder anders sieht. An besten das normale Vanilla lernen dann kann man wohl nix falsch machen,und wenn man etwas den Code vereinfachen will dann Jquery oder andere.
            Mein soforthilfe Forum und Chat

            Kommentar


            • #7
              Aber erstmal das Komplettpaket herunterladen
              http://vanilla-js.com/

              Kommentar


              • #8
                Zitat von Meister1900 Beitrag anzeigen
                Aber erstmal das Komplettpaket herunterladen
                http://vanilla-js.com/
                Dazu habe ich mal nee Frage . Warum runterladen ? Ich dachte das Javascript schon im Browser mit drinne ist ooder verwechsel ich da irgendwas ?
                Mein soforthilfe Forum und Chat

                Kommentar


                • #9
                  Das ist Satire. Oder so.

                  Kommentar


                  • #10
                    Okay, hab mal kurz in Vanilla reingeschaut - und denke ich bleibe erst mal bei jQuery. Vanila scheint recht kompliziert zu sein.
                    Und da habe ich auch gleich eine Frage zu dem Scipt von basit1012. Kann mir das hier eine etwas erklären? Ich meine, was passiert da.
                    Code:
                    $('#slider ul li:last-child').prependTo('#slider ul');
                    
                        function moveLeft() {
                            $('#slider ul').animate({
                                left: + slideWidth     //Okay, hier wird der Slider animiert mit einer Geschwindigkeit von 200, das verstehe ich.
                            }, 200, function () {
                                $('#slider ul li:last-child').prependTo('#slider ul'); // ich verstehe zwar, was prependTo() heißt, aber nicht in diesem Zusammenhang.
                                $('#slider ul').css('left', '');  // css left ohne Wert???
                            });
                        };
                    Vielleicht sollte ich auch noch erwähnen, die API kann mir zwar durchaus viel helfen, allerdings hapert es bei mir auch mit dem Englisch, so dass ich nicht wirklich immer alles dort verstehe. Also wenn ich da was überlese - bitte entschudligt.

                    Kommentar


                    • #11
                      Habe jetzt gerade meine erste, super komplizierte, eigene Funktion geschrieben:
                      Code:
                          $('#slider').mouseover(function () {
                              $('a.control_prev, a.control_next').fadeIn( "slow", function(){
                      
                              })
                          });
                      
                          $('#slider').mouseout(function () {
                              $('a.control_prev, a.control_next').fadeOut( "slow", function(){
                      
                              })
                          });
                      Funktioniert soweit auch ganz gut. Wenn ich nun jedoch auf die Pfeile gehe, blinken die zwei, drei mal, bevor sie sichtbar bleiben. Wenn ich mit der Maus runter gehe, blinken sie wieder, bevor sie verschwinden. Wo liegt mein Fehler?


                      habs gelöst. Statt mouseover und mouseout einfach mouseenter und mouseleave.

                      Kommentar


                      • #12
                        Zitat von rabab Beitrag anzeigen
                        was passiert da.
                        Code:
                        $('#slider ul li:last-child').prependTo('#slider ul');
                        
                        function moveLeft() {
                        $('#slider ul').animate({
                        left: + slideWidth //Okay, hier wird der Slider animiert mit einer Geschwindigkeit von 200, das verstehe ich.
                        }, 200, function () {
                        $('#slider ul li:last-child').prependTo('#slider ul'); // ich verstehe zwar, was prependTo() heißt, aber nicht in diesem Zusammenhang.
                        $('#slider ul').css('left', ''); // css left ohne Wert???
                        });
                        };
                        Vielleicht sollte ich auch noch erwähnen, die API kann mir zwar durchaus viel helfen, allerdings hapert es bei mir auch mit dem Englisch, so dass ich nicht wirklich immer alles dort verstehe. Also wenn ich da was überlese - bitte entschudligt.
                        Da ich in erklären eine Niete bin kann ich dir vieleicht so helfen.
                        das hier.
                        Code:
                        $('#slider ul').css('left', '');
                        kannst du auch das raus machen

                        Code:
                        $('#slider ul').css('left', '0px');
                        Mein Englisch wahr vor der programmiererei auch schlecht. Habe dann immer die Texte aus der Documentation Kopiert und dann in den Google übersetzter eingefügt.
                        Google übersetzt wohl nicht immer korekt ,aber meistens reicht es. Vieleicht kennt ja noch jemand einen besseren Übersetzer ?
                        Mein soforthilfe Forum und Chat

                        Kommentar


                        • #13
                          Ahh, okay, dass macht Sinn. Hatte aber irgendwie auch ne falsche Schreibweise im Kopf ( 'left: 0px' ). Ist eben noch neu für mich.
                          Ich hab nen Browser-AddOn welches mir den markierten Text übersetzt. Nutze ich ständig und ist auch recht gut. Aber gerade so ganz spezielles bekommt der auch nicht immer hin.
                          Danke Dir

                          Kommentar


                          • #14
                            Zitat von rabab Beitrag anzeigen
                            Hatte aber irgendwie auch ne falsche Schreibweise im Kopf ( 'left: 0px' ).
                            Das gibt es auch das sieht dann ungefähr so aus
                            Code:
                            $('#slider ul').css({'left:0px'});
                            Das nutzt man eigentlich wenn man mehrere Styls anwendet zb so
                            Code:
                              $('#slider ul').css({'left:0px','top:0px','background:red'});
                            Ich hofe das die schreibweise so richtig ist weil habe die gerade nicht 100% im Kopf.Aber sollte so stimmen.

                            Anstatt 0px kann man auch nur eine 0 schreiben.
                            Aber da du ja Php kannst solltest du das ja bestimmt wissen.
                            Mein soforthilfe Forum und Chat

                            Kommentar


                            • #15
                              Ja, genau das meinte ich. War mir doch so. Hatte dann aber vorhin schnell geguckt und diese Schreibweise nicht gefunden, daher dachte ich, ich bringe da was ducheinander. Gefällt mir so aber besser, weil es eher an das eigentliche CSS angelehnt ist.

                              Kommentar

                              Lädt...
                              X