Aaron3219
Senior HTML'ler
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)) :
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.
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();
});
}
};
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.