Ich habe gerade ein Karussell gebaut, an dem ich gearbeitet habe und das Swipe / Touch verwendet und auch Steuerelemente wie prev / next verwendet, um das Karussell zu steuern. Im Moment habe ich ein Problem bezüglich des Karussellverhaltens. Im Grunde versuche ich, es eins nach dem anderen gleiten zu lassen. Hier ist ein Beispiel für den Code, an dem ich gearbeitet habe. Im Moment scheint es um 2 oder 3 zu rutschen, je nachdem wie viele Karussells ich aufgestellt habe.
Ich habe auch ein Problem in Bezug auf die Reaktionsfähigkeit auch
Okay, meine erste Antwort hier war in Eile, aber ich glaube, ich habe eine klare JavaScript-Darstellung, wie die meisten modernen Karussells funktionieren würden, obwohl der Rest Ihnen überlassen ist, wenn Sie sich dafür entscheiden.
Hier ist die JavaScript-Seite der Dinge gut erklärt
%Vor% In diesem Abschnitt des Codes für das Karussell kann die Eigenschaft .hidden durch etwas anderes ersetzt werden, aber es gibt eine grundlegende Vorstellung davon, wie die Folien durch die aktiven und inaktiven Zustände weitergeleitet werden.
wie für den HTML-Teil
Alles wurde vereinfacht:
die class von carousel um ein neues Karussell zu machen,
data-active Attribut, um anzugeben, welche Folie aktiv ist (ab 0 ),
das Attribut data-auto , das angibt, ob das Karussell automatisiert ist oder nicht (die right_ steht für die Richtung der Automation und _1 für die Dauer des Intervalls),
das Attribut data-buttons , wenn Schaltflächen benötigt werden,
data-indicators wenn Karussellindikatoren benötigt werden und
die Dias wie die Kinder des Karussells.
Also, das ist so ziemlich der HTML / JS-Code, der für die Erstellung eines einfachen Karussells benötigt wird.
Falls Sie nach etwas aufregendem in der Welt von JavaScript suchen, gibt es eine Bibliothek, an der ich arbeite, an der Sie interessiert sein könnten: Ссылка .
Folgendes sollte das Problem mit der Folie beheben. Ich habe Code zu CSS und JS hinzugefügt, um sicherzustellen, dass sich die Folie auf einer Folie bewegt und auch auf einer kleineren Bildschirmauflösung funktioniert.
Das JS:
Das CSS:
Der HTML-Code: Ich habe ihn unverändert gelassen. Verwenden Sie also denselben HTML-Code, den Sie haben. Beste Grüße.
Beim Festlegen / Abrufen von Werten in einer Sammlung von Elementen empfiehlt es sich, .map () zu verwenden. Hier ist die Antwort in 50 Zeilen (Ansicht auf CodePen ):
%Vor% Es ist besser, hier bei jQuery zu bleiben. Oluwafunmitos Lösung verwendet innerHTML , was die einzige praktische Technik ist, wenn Vanille JS verwendet wird. Allerdings kann innerHTML Ihre Website-Besucher unbeabsichtigt einem XSS-Angriff aussetzen und sollte dies sein vermieden wann immer möglich.
Anstatt den ganzen Code durchzugehen, kann ich Ihnen einen voll funktionsfähigen Karussellcode mit Bootstrap und JavaScript zur Verfügung stellen. vielleicht wird dies einen Hinweis darauf geben, wo Ihr Programm fehlt und ein wenig Hilfe bei der Beherrschung Ihres Codes.
%Vor%JavaScript
%Vor%credits: Kurs
Tags und Links javascript jquery css hammer.js