Frage Touchscreen-Slider

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.148
237
63
19
Hallo liebes Forum,

also ich würde gerne einen Slider haben, den man (z.B. auf Smartphones) per Touchscreen verschieben kann (oder auch auf dem Computer).
Hier mal eben ein schnell geschriebener Code für einen Slider (welcher aber nur mit buttons funktioniert, die dann die Funktion back() oder forward() ausführen (per onclick)) :

Code:
var bild1 = "https://www.allmystery.de/static/upics/942586_handy.jpg";
var bild2 = "https://www.aquasoft.de/blog/hilfe/files/2013/04/Strahlen2.png";
var bild3 = "https://www.aquasoft.de/blog/hilfe/files/2013/04/Strahlen-blau-lila.jpg";
var bild4 = "https://www.gardeblanche.at/wp-content/uploads/2017/04/hintergrund.jpg";

var img_anzahl = $("#slider img").length;
var time = 500;

$(document).ready(function () {
    $("#slider").css("width", img_anzahl * 100 + 'vw');

    $('#bild1').attr("src", bild1);
    $('#bild2').attr("src", bild2);
    $('#bild3').attr("src", bild3);
    $('#bild4').attr("src", bild4);
    $('#bild5').attr("src", bild1);
});

document_width = parseInt($(window).outerWidth());
left = parseInt($('#slider').css("left"));
function back() { 
    if (left == 0) {
        $("#slider").css("left", 0 - document_width * 4);
        $('#slider').animate({left: 0 - document_width * 3 + 'px'}, time, function () {
            back_pic();
        });
    } else {     
        $('#slider').animate({left: left + document_width + 'px'}, time, function () {
            back_pic();
        });
    }
};

function forward() { 

    if (left < 0 - document_width * 3) {
        $("#slider").css("left", 0);
        $('#slider').animate({left: 0 - document_width + 'px'}, time, function () {
            fore_pic();
        });
    } else {
        $('#slider').animate({left: left - document_width + 'px'}, time, function () {
            fore_pic();
        });
    }
};
Irgendwelche Denkanstöße/Tipps?

Edit:
hier ist der Link zur Seite. Ist vielleicht etwas besser:
https://www.xn--frachtagentur-krger-lbc.de/test/index-3.html

2. Edit:
Wichtig!
Es darf kein Github oder so sein.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
Wenn Du nur einen haben willst, brauchst Du das Rad nicht neu zu erfinden. Selber verwende ich z. B. Swiper, der das Wischen sowohl auf dem Touchscreen als auch auf dem Desktop-PC mit der Maus unterstützt.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.148
237
63
19
Ja den Swiper habe ich mir auch schon angeschaut.
Ich wollte jedoch einfach mal selber wissen, wie man sowas machen könnte.
Es ging eher um den Lerneffekt
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
Zwei Verbesserungsvorschläge:
  1. Die URLs der Bilder in einem Array ablegen und mit einer Schleife die HTML-Elemente erzeugen.
  2. Das HTML mit PHP generieren, dann ist man sicher, dass Suchmaschinen es auswerten können und dass die Bilder auch bei ausgeschaltetem Javascript zumindest sichtbar sind.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.148
237
63
19
Ja danke für die Vorschläge.

Ich habe mal den Swiper eingebaut. Leider funktioniert sämtliches Javascript/jquery nicht mehr auf dem Handy. Beim Computer läuft alles.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
Ich habe ein Android-Handy, Samsung S4, und dort funktioniert der Swiper mit Chrome und Opera. Man muss nur etwas Obacht geben, dass man mit dem Wischen nicht zu weit rechts beginnt.
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.148
237
63
19
Mmh ja also der Swiper läuft soweit auch. Nur sachen wie der sticky_header, smooth scrolling, etc. auf einmal nicht mehr
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.144
428
83
68
Das funktioniert bei mir auf dem PC auch nicht. Console meldet:
Uncaught ReferenceError: $ is not defined
at media.js:1
(anonymous) @ media.js:1
parallax_effect.js:1 Uncaught ReferenceError: $ is not defined
at parallax_effect.js:1
(anonymous) @ parallax_effect.js:1
sticky_header.js:1 Uncaught ReferenceError: $ is not defined
at sticky_header.js:1
(anonymous) @ sticky_header.js:1
smooth_scrolling.js:1 Uncaught ReferenceError: $ is not defined
at smooth_scrolling.js:1
(anonymous) @ smooth_scrolling.js:1
ajax_load.js:4 Uncaught ReferenceError: $ is not defined
at ajax_load.js:4
(anonymous) @ ajax_load.js:4
section1_menu_buttons.js:1 Uncaught ReferenceError: $ is not defined
at section1_menu_buttons.js:1
und ganz am Anfang:
Mixed Content: The page at 'https://www.xn--frachtagentur-krger-lbc.de/test/index-3.html#test' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js'. This request has been blocked; the content must be served over HTTPS.
D. h. Du musst auch jQuery über HTTPS laden oder das Protokoll weg lassen:
Code:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
 

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.148
237
63
19
Ach verdammt.

Du hast recht.
Ich werds mal später ausprobieren.
Ich geh aber mal davon aus, dass es funktionieren wird.
 
Werbung: