Inhaltsverzeichnis

swiper

Heim

Web-Frontend

js-Tutorial

Einführung in das Swiper-Plug-in und wie man Bilder karussellt

PHP中文网

Jun 19, 2017 pm 05:23 PM

swiper 怎么插件简介

swiper

Swiper ist ein gleitendes Spezialeffekt-Plug-in, das ausschließlich mit JavaScript erstellt wurde und auf Mobiltelefone, Tablets und andere mobile Endgeräte abzielt.

Swiper kann gängige Effekte wie Touchscreen-Fokusbild, Touchscreen-Tab-Umschaltung, Touchscreen-Mehrbildumschaltung usw. erzielen.

Swiper ist Open Source, kostenlos, stabil, einfach zu bedienen und leistungsstark. Es ist eine wichtige Wahl für die Erstellung von Websites für mobile Endgeräte!

1. Erstellen Sie zunächst eine Swiper-Betriebsumgebung. Die erforderlichen Dateien sind swiper.min.js und swiper.min.css.

<!DOCTYPE html>
<html>
　　<head>
　　　　...
　　　　<link rel="stylesheet" href="path/to/swiper.min.css?1.1.10">
　　</head>
　　<body>
　　　　...
　　</body>

Nach dem Login kopieren

　　<script src="path/to/swiper.min.js?1.1.10"></script>

Nach dem Login kopieren

</html>

Nach dem Login kopieren

2. HTML-Inhalt schreiben.

<div class="swiper-container">
　　<div class="swiper-wrapper">
　　　　<div class="swiper-slide">Slide 1</div>
　　　　<div class="swiper-slide">Slide 2</div>
　　　　<div class="swiper-slide">Slide 3</div>
　　</div>

　　<!-- 如果需要分页器 -->
　　<div class="swiper-pagination"></div>
</div>

Nach dem Login kopieren

3 Du möchtest vielleicht eine Größe für Swiper definieren, aber natürlich nicht.

.swiper-container {
　　width: 600px;
　　height: 300px;
}

Nach dem Login kopieren

4. Swiper initialisieren: vorzugsweise neben dem -Tag (Funktionsaufruf)

<script>

Nach dem Login kopieren

　var swiper= new Swiper('.swiper-container',{
　　autoplay:1000,//Automatisches Karussell
　　autoplayDisableOnInteraction:false,//Weiterscrollen nach dem Schieben
　　loop:true,///Loop
　　Paginierung : '.swiper-pagination',//pagination
　　paginationClickable:true,//kleiner Punktklick
　　spaceBetween:30,///Bildlücke
　　direction:"horizontal"//Standard horizontal vertikal
})

</script>
</body>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in das Swiper-Plug-in und wie man Bilder karussellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Will R.E.P.O. Crossplay haben?

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7549

CakePHP-Tutorial

1382

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

PyCharm-Einsteigerhandbuch: Umfassendes Verständnis der Plug-In-Installation! Feb 25, 2024 pm 11:57 PM

PyCharm ist eine leistungsstarke und beliebte integrierte Entwicklungsumgebung (IDE) für Python, die eine Fülle von Funktionen und Tools bereitstellt, damit Entwickler Code effizienter schreiben können. Der Plug-In-Mechanismus von PyCharm ist ein leistungsstarkes Tool zur Erweiterung seiner Funktionen. Durch die Installation verschiedener Plug-Ins können PyCharm um verschiedene Funktionen und benutzerdefinierte Funktionen erweitert werden. Daher ist es für PyCharm-Neulinge von entscheidender Bedeutung, die Installation von Plug-Ins zu verstehen und zu beherrschen. In diesem Artikel erhalten Sie eine detaillierte Einführung in die vollständige Installation des PyCharm-Plug-Ins.

Was ist das Installationsverzeichnis der Chrome-Plug-in-Erweiterung? Mar 08, 2024 am 08:55 AM

Was ist das Installationsverzeichnis der Chrome-Plug-in-Erweiterung? Unter normalen Umständen lautet das Standardinstallationsverzeichnis von Chrome-Plug-In-Erweiterungen wie folgt: 1. Der Standard-Installationsverzeichnis-Speicherort von Chrome-Plug-Ins in Windows XP: C:\DocumentsandSettings\Benutzername\LocalSettings\ApplicationData\Google\Chrome\UserData\ Default\Extensions2. Chrome in Windows7 Der Standardinstallationsverzeichnisspeicherort des Plug-Ins: C:\Benutzer\Benutzername\AppData\Local\Google\Chrome\User

Teilen Sie drei Lösungen mit, warum der Edge-Browser dieses Plug-in nicht unterstützt Mar 13, 2024 pm 04:34 PM

Wenn Benutzer den Edge-Browser verwenden, fügen sie möglicherweise einige Plug-Ins hinzu, um weitere Anforderungen zu erfüllen. Beim Hinzufügen eines Plug-Ins wird jedoch angezeigt, dass dieses Plug-In nicht unterstützt wird. Heute stellt Ihnen der Herausgeber drei Lösungen vor. Methode 1: Versuchen Sie es mit einem anderen Browser. Methode 2: Der Flash Player im Browser ist möglicherweise veraltet oder fehlt, sodass das Plug-in nicht unterstützt wird. Sie können die neueste Version von der offiziellen Website herunterladen. Methode 3: Drücken Sie gleichzeitig die Tasten „Strg+Umschalt+Entf“. Klicken Sie auf „Daten löschen“ und öffnen Sie den Browser erneut.

Mar 18, 2024 am 09:10 AM

Object-Relational Mapping (ORM)-Frameworks spielen eine wichtige Rolle in der Python-Entwicklung. Sie vereinfachen den Datenzugriff und die Datenverwaltung, indem sie eine Brücke zwischen Objekt- und relationalen Datenbanken schlagen. Um die Leistung verschiedener ORM-Frameworks zu bewerten, wird in diesem Artikel ein Vergleich mit den folgenden gängigen Frameworks durchgeführt: sqlAlchemyPeeweeDjangoORMPonyORMTortoiseORM Testmethode Der Benchmark verwendet eine SQLite-Datenbank mit 1 Million Datensätzen. Der Test führte die folgenden Vorgänge in der Datenbank durch: Einfügen: 10.000 neue Datensätze in die Tabelle einfügen. Lesen: Alle Datensätze in der Tabelle lesen. Aktualisieren: Ein einzelnes Feld für alle Datensätze in der Tabelle aktualisieren. Löschen: Alle Datensätze in der Tabelle löschen. Jeder Vorgang

So erkennen Sie echte und gefälschte Schuhkartons mit Nike-Schuhen (beherrschen Sie einen Trick, um sie leicht zu identifizieren) Sep 02, 2024 pm 04:11 PM

Als weltbekannte Sportmarke haben die Schuhe von Nike viel Aufmerksamkeit erregt. Allerdings gibt es auch eine Vielzahl gefälschter Produkte auf dem Markt, darunter auch gefälschte Nike-Schuhkartons. Die Unterscheidung echter Schuhkartons von gefälschten ist für den Schutz der Rechte und Interessen der Verbraucher von entscheidender Bedeutung. In diesem Artikel erfahren Sie einige einfache und effektive Methoden, mit denen Sie zwischen echten und gefälschten Schuhkartons unterscheiden können. 1: Titel der Außenverpackung Wenn Sie sich die Außenverpackung von Nike-Schuhkartons ansehen, können Sie viele subtile Unterschiede feststellen. Originale Nike-Schuhkartons bestehen in der Regel aus hochwertigen Papiermaterialien, die sich glatt anfühlen und keinen offensichtlichen stechenden Geruch verströmen. Die Schriftarten und Logos auf authentischen Schuhkartons sind in der Regel klar und detailliert und es gibt keine Unschärfen oder Farbinkonsistenzen. 2: Der Logo-Heißprägetitel ist normalerweise auf dem Original-Schuhkarton abgebildet

Mar 18, 2024 am 09:19 AM

Object-Relational Mapping (ORM) ist eine Programmiertechnologie, die es Entwicklern ermöglicht, Objektprogrammiersprachen zum Bearbeiten von Datenbanken zu verwenden, ohne SQL-Abfragen direkt schreiben zu müssen. ORM-Tools in Python (wie SQLAlchemy, Peewee und DjangoORM) vereinfachen die Datenbankinteraktion für Big-Data-Projekte. Vorteile Einfachheit des Codes: ORM macht das Schreiben langwieriger SQL-Abfragen überflüssig, was die Einfachheit und Lesbarkeit des Codes verbessert. Datenabstraktion: ORM bietet eine Abstraktionsschicht, die Anwendungscode von Datenbankimplementierungsdetails isoliert und so die Flexibilität verbessert. Leistungsoptimierung: ORMs nutzen häufig Caching- und Batch-Vorgänge, um Datenbankabfragen zu optimieren und dadurch die Leistung zu verbessern. Portabilität: ORM ermöglicht Entwicklern

So ermöglicht Google Chrome die Ausführung von Animations-Plugins Mar 28, 2024 am 08:01 AM

Wie ermöglicht Google Chrome die Ausführung von Animations-Plugins? Google Chrome ist sehr leistungsfähig, um Videoanimationen anzusehen. Wenn Sie jedoch verschiedene animierte Videos ansehen möchten, müssen Sie nach der Installation Google Chrome installieren Wenn ich das Animations-Plugin verwende, interessiert mich das Video immer noch nicht. Wie soll ich mit diesem Problem umgehen? Lassen Sie sich anschließend vom Editor die einzelnen Schritte zeigen, damit das Animations-Plugin in Google Chrome ausgeführt werden kann. Interessenten können vorbeikommen und einen Blick darauf werfen. Spezifische Schritte für Google Chrome, um die Ausführung von Animations-Plug-ins zu ermöglichen: 1. Führen Sie zunächst Google Chrome auf Ihrem Computer aus und klicken Sie auf die Hauptmenüschaltfläche in der oberen rechten Ecke der Startseite (wie im Bild gezeigt). 2. Nachdem Sie das Hauptmenü geöffnet haben, wählen Sie unten die Option „Einstellungen“ (wie im Bild gezeigt). 3. In den Einstellungen

So entsperren Sie das Google Chrome-Plug-in Apr 01, 2024 pm 01:41 PM

Wie entsperre ich das Google Chrome-Plug-in? Viele Benutzer installieren gerne verschiedene nützliche Plug-Ins, wenn sie Google Chrome verwenden. Diese Plug-Ins können umfangreiche Funktionen und Dienste bereitstellen und die Arbeitseffizienz verbessern immer angezeigt wird, ist blockiert. Wie können Sie das Plug-in entsperren, nachdem Sie auf diese Situation gestoßen sind? Lassen Sie sich nun vom Editor die Schritte zum Entsperren von Plug-Ins in Google Chrome zeigen. Freunde in Not sollten einen Blick darauf werfen. So entsperren Sie Plug-ins in Google Chrome Schritt 1. Wenn die blockierte Eingabeaufforderung angezeigt wird, klicken Sie auf die „Steuerleiste“ und wählen Sie „ActiveX-Steuerelement installieren“. 2. Öffnen Sie dann das Menü „Extras“ des Browsers und klicken Sie auf „Internetoptionen“. 3.

See all articles