Heim Web-Frontend js-Tutorial So wechseln Sie die Pfeiltasten im Swiper-Plug-in

So wechseln Sie die Pfeiltasten im Swiper-Plug-in

Apr 13, 2018 pm 01:39 PM
swiper 切换 箭头

Dieses Mal zeige ich Ihnen, wie Sie die Pfeiltasten mit dem Swiper-Plug-in wechseln. Werfen wir einen Blick darauf. Das heißt, Sie müssen den linken und rechten Umschaltpfeil außerhalb des Containers verschieben und den Pfeilstil anpassen.

Fügen Sie einen übergeordneten Container zum Swiper-Container hinzu, lassen Sie eine Lücke zwischen den beiden Containern und positionieren Sie den Pfeil zwischen den Lücken, dann ist alles in Ordnung.

Der Pfeil ist standardmäßig
absolut positioniert
. Sie können die Pfeilposition anpassen, indem Sie dem übergeordneten Container eine relative Positionierung zuweisen. Darüber hinaus verwendet der Pfeil ein Hintergrundbild. Denken Sie beim Ändern der Größe des Pfeils daran, die Größe des Hintergrundbilds zu ändern. Erweitern Sie den Code. CSS:

html:
<style>
    .out_container{
      width: 280px;
      height: 150px;
      margin: 100px auto;
      position: relative;
      outline: 1px solid black;
    }
    .in_container{
      width: 216px;
      height: 130px;
      margin: 0 auto;
      overflow: hidden;
    }
    .swiper_btn{
      width: 20px;
      height: 20px;
      background-size: contain;
    }
  </style>
Nach dem Login kopieren

js:
<body>
  <p class="out_container">
    <p class="in_container">
      <p class="swiper-wrapper">
        <p class="swiper-slide"><img src="" alt=""></p>
        <p class="swiper-slide"><img src="" alt=""></p>
        <p class="swiper-slide"><img src="" alt=""></p>
      </p>
      <p class="swiper-button-prev swiper_btn"></p>
      <p class="swiper-button-next swiper_btn"></p>
    </p>
  </p>
</body>
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
<script>
  var mySwiper = new Swiper('.in_container', {
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
  })
</script>
Nach dem Login kopieren

Empfohlene Lektüre:

Wie Angular den Timer-Effekt implementiert


Detaillierte Erläuterung der Datenübertragungs- und Datenverteilungsschritte von vue.js


Das obige ist der detaillierte Inhalt vonSo wechseln Sie die Pfeiltasten im Swiper-Plug-in. 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

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So entfernen Sie Pfeilsymbole für Verknüpfungen unter Windows 11 So entfernen Sie Pfeilsymbole für Verknüpfungen unter Windows 11 Dec 28, 2023 am 10:39 AM

Nachdem viele Benutzer das neueste Win11-System verwendet haben, erscheint ein kleiner Pfeil auf dem Verknüpfungssymbol auf dem Desktop, der sich auf das Erscheinungsbild auswirkt. Daher haben wir Ihnen ein Tutorial zum Entfernen des kleinen Pfeils aus dem Win11-Verknüpfungssymbol zusammengestellt Es sieht nicht gut aus. Schauen wir mal, wie es funktioniert. So entfernen Sie den kleinen Tastenkombinationspfeil in Win11: 1. Drücken Sie zunächst gleichzeitig die Tastenkombination „win+r“ auf der Tastatur. 2. Öffnen Sie dann „Ausführen“, geben Sie den Befehl „regedit“ ein und klicken Sie auf die Schaltfläche „OK“. 3. Rufen Sie als Nächstes die Seite „Registrierungseditor“ auf und klicken Sie zum Öffnen darauf: HKEY_CLASSES_ROOT\lnkfile (kann kopiert und eingefügt werden). 4. Klicken Sie nach der erneuten Eingabe mit der rechten Maustaste auf „lsShortcut“ und wählen Sie aus

Wie kann man den kleinen Pfeil des Verknüpfungssymbols in Win10 schnell wiederherstellen? Die Lösung für das fehlende Verknüpfungssymbol Wie kann man den kleinen Pfeil des Verknüpfungssymbols in Win10 schnell wiederherstellen? Die Lösung für das fehlende Verknüpfungssymbol Feb 29, 2024 pm 04:46 PM

In diesem Artikel erfahren Sie, wie Sie den kleinen Pfeil des Verknüpfungssymbols in Win10 wiederherstellen. Der kleine Pfeil im Verknüpfungssymbol zeigt an, dass es sich bei der Datei oder dem Ordner um die Verknüpfung und nicht um die Originaldatei oder den Originalordner handelt. Wenn der kleine Pfeil auf einem Verknüpfungssymbol verschwindet, kann dies zu Verwirrung führen und es für Benutzer schwierig machen, zu erkennen, welche Dateien oder Ordner Verknüpfungen sind. In diesem Artikel finden Sie detaillierte Schritte, mit denen Benutzer den kleinen Pfeil auf dem Verknüpfungssymbol problemlos wiederherstellen können. Tipps zum Wiederherstellen des kleinen Pfeils auf dem Verknüpfungssymbol 1. Standardmäßig wird im Win10-System ein kleiner Pfeil auf dem Desktop-Verknüpfungssymbol angezeigt. Einige Benutzer haben jedoch festgestellt, dass der kleine Pfeil auf dem Verknüpfungssymbol seltsamerweise verschwunden ist Klicken Sie auf [Rechtsklick], und wählen Sie im sich öffnenden Rechtsklick-Menüelement [Neuer Text] aus

Wie wechsle ich beim Xiaomi 14Ultra zwischen 4g und 5g? Wie wechsle ich beim Xiaomi 14Ultra zwischen 4g und 5g? Feb 23, 2024 am 11:49 AM

Xiaomi 14Ultra ist eines der beliebtesten Xiaomi-Modelle in diesem Jahr. Xiaomi 14Ultra verbessert nicht nur den Prozessor und verschiedene Konfigurationen, sondern bringt den Benutzern auch viele neue funktionale Anwendungen beliebt, aber es gibt einige häufig verwendete Funktionen, die Sie vielleicht noch nicht kennen. Wie wechselt das Xiaomi 14Ultra zwischen 4g und 5g? Lassen Sie mich Ihnen unten den spezifischen Inhalt vorstellen! Wie wechsle ich beim Xiaomi 14Ultra zwischen 4g und 5g? 1. Öffnen Sie das Einstellungsmenü Ihres Telefons. 2. Suchen Sie im Einstellungsmenü nach den Optionen „Netzwerk“ und „Mobiles Netzwerk“ und wählen Sie sie aus. 3. In den Mobilfunknetzeinstellungen sehen Sie die Option „Bevorzugter Netztyp“. 4. Klicken oder wählen Sie diese Option und Sie werden sehen

Bedienungs-Tutorial für den Wechsel von der Win11-Home-Version zur Professional-Version_Bedienungs-Tutorial für den Wechsel von der Win11-Home-Version zur Professional-Version Bedienungs-Tutorial für den Wechsel von der Win11-Home-Version zur Professional-Version_Bedienungs-Tutorial für den Wechsel von der Win11-Home-Version zur Professional-Version Mar 20, 2024 pm 01:58 PM

Wie konvertiert man Win11 Home Edition in Win11 Professional Edition? Im Win11-System ist es in Home Edition, Professional Edition, Enterprise Edition usw. unterteilt, und auf den meisten Win11-Notebooks ist das Win11 Home Edition-System vorinstalliert. Heute zeigt Ihnen der Editor die Schritte zum Wechsel von der Win11-Home-Version zur Professional-Version 1. Klicken Sie zunächst mit der rechten Maustaste auf diesen Computer auf dem Win11-Desktop und den Eigenschaften. 2. Klicken Sie auf Produktschlüssel ändern oder Windows aktualisieren. 3. Klicken Sie dann nach der Eingabe auf Produktschlüssel ändern. 4. Geben Sie den Aktivierungsschlüssel ein: 8G7XN-V7YWC-W8RPC-V73KB-YWRDB und wählen Sie Weiter. 5. Dann wird der Erfolg angezeigt, sodass Sie die Win11-Home-Version auf die Win11-Professional-Version aktualisieren können.

So implementieren Sie die Dual-System-Umschaltung im Win10-System So implementieren Sie die Dual-System-Umschaltung im Win10-System Jan 03, 2024 pm 05:41 PM

Viele Freunde sind möglicherweise nicht an das Win-System gewöhnt, wenn sie zum ersten Mal damit in Berührung kommen. Es gibt duale Systeme im Computer. Schauen wir uns nun die detaillierten Schritte zum Wechseln an zwischen den beiden Systemen. So wechseln Sie zwischen zwei Systemen im Win10-System 1. Umschalten der Tastenkombination 1. Drücken Sie die Tasten „win“ + „R“, um „Ausführen“ zu öffnen. 2. Geben Sie „msconfig“ in das Feld „Ausführen“ ein und klicken Sie auf „OK“. 3. Im geöffneten Fenster „ „Systemkonfiguration“ Wählen Sie in der Benutzeroberfläche das gewünschte System aus und klicken Sie auf „Als Standard festlegen“. Nach Abschluss kann „Neustart“ den Wechsel abschließen. Methode 2. Schalter beim Booten auswählen 1. Wenn Sie über duale Systeme verfügen, steht Ihnen eine Auswahloperationsschnittstelle zur Verfügung wird beim Booten angezeigt. Sie können die Auf- und Ab-Tasten der Tastatur verwenden, um das System auszuwählen

So lösen Sie die Probleme, die bei der Verwendung von Swiper in vue3 auftreten So lösen Sie die Probleme, die bei der Verwendung von Swiper in vue3 auftreten May 11, 2023 pm 01:07 PM

1. Installieren Sie Swiper. Verwenden Sie npminstallswiper, um das Swpier-Plugin npminstallswiper-s//@9.2.0/ zu installieren, oder installieren Sie die angegebene Version npminstallswiper@8.4.7-s. 2. Verwenden Sie Swiper, um der Referenzmethode direkt zu folgen Offizielle Website. Lösung: Die Komponente verwendet den folgenden Pfad import{Swiper/vue/swiper-vue; manchmal erforderlich

Wechseln Sie den Dual-System-Startmodus des Apple-Computers Wechseln Sie den Dual-System-Startmodus des Apple-Computers Feb 19, 2024 pm 06:50 PM

So wechseln Sie beim Start zwischen Apple-Dual-Systemen Als leistungsstarkes Gerät können Apple-Computer zusätzlich zu ihrem eigenen macOS-Betriebssystem auch andere Betriebssysteme wie Windows installieren, um einen Dual-System-Wechsel zu erreichen. Wie wechseln wir also beim Booten zwischen den beiden Systemen? In diesem Artikel erfahren Sie, wie Sie auf Apple-Computern zwischen Dual-Systemen wechseln. Bevor wir Dual-Systeme installieren, müssen wir zunächst bestätigen, ob unser Apple-Computer Dual-System-Switching unterstützt. Im Allgemeinen basieren Apple-Computer auf

So verwenden Sie Tastenkombinationen zum Wechseln von Arbeitsmappen in Excel So verwenden Sie Tastenkombinationen zum Wechseln von Arbeitsmappen in Excel Mar 20, 2024 pm 01:50 PM

Bei der Anwendung von Excel-Software sind wir es gewohnt, Tastenkombinationen zu verwenden, um einige Vorgänge einfacher und schneller zu machen. Wenn wir sie anzeigen, müssen wir ständig zwischen Aufgaben wechseln Durch die schnellere Umschaltmethode wird viel Zeit beim Umschalten eingespart, was erheblich zur Verbesserung der Arbeitseffizienz beiträgt. Um dieses Problem zu lösen, wird der Redakteur heute darüber sprechen : So verwenden Sie die Tastenkombinationen zum Wechseln von Arbeitsmappen in Excel. 1. Zuerst sehen Sie unten in der geöffneten Excel-Tabelle mehrere Arbeitsmappen. Sie müssen schnell zwischen verschiedenen Arbeitsmappen wechseln, wie in der Abbildung unten gezeigt. 2. Drücken Sie dann die Strg-Taste auf der Tastatur, ohne sie zu bewegen, und wählen Sie bei Bedarf den Job rechts aus

See all articles