Frage Touchscreen-Slider

[Aaron3219]

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)) :

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.

 

[Aaron3219]

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

 

[Aaron3219]

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.

 

[Aaron3219]

Mmh ja also der Swiper läuft soweit auch. Nur sachen wie der sticky_header, smooth scrolling, etc. auf einmal nicht mehr

 

[Aaron3219]

Ach verdammt.

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