Fügen Sie der .svelte-Komponente .js / .css-Dateien hinzu

vladbelozertsev 2020-08-29 06:28.

Ich möchte Swiper Sliper hinzufügen, meine Frage ist:

Es ist möglich, CSS in das Skript-Tag einzufügen, wie folgt:

<script> import from "styles.css" ... </script>

Weil der Import in den Kopf schwierig ist ( CSS in node_modules in svelte importieren )

Ich füge swiper.jsDatei zu svelte hinzu, und es funktioniert fast. Es funktioniert bei Berührung (Maus), Tasten jedoch nicht ( .swiper-button-next .swiper-button-prev). Gibt es spezielle Regeln für den Import von .js-Dateien?

Codebeispiel: https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

svelte swiper

1 answers

johannchopin 2020-08-29 07:29.

Mit Rollup können Sie die CSS-Datei einfach wie für ein .jsModul importieren :

<script>
  import { onMount } from "svelte";
  import "swiper/swiper-bundle.min.css"; // <- just import your css
  ...
</script>

Für das Navigationsproblem steht es in der Swiper-Dokumentation :

Standardmäßig exportiert Swiper nur die Kernversion ohne zusätzliche Module (wie Navigation, Paginierung usw.). Sie müssen sie also auch importieren und konfigurieren:

// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';

// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);

// init Swiper:
const swiper = new Swiper(...);

Schließlich kann Ihre Komponenteninitialisierung folgendermaßen durchgeführt werden:

<script>
  import { onMount } from "svelte";
  import "swiper/swiper-bundle.min.css";
  import Swiper, { Navigation } from "swiper";

  Swiper.use([Navigation]);

  onMount(() => {
    const swiper = new Swiper(".swiper-container", {
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
      }
    });
  });
</script>

Hier ist der Link für die Codesandbox .

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: Alles, was sie über die Liebe gesagt hat und ihr 5-Jahres-Fenster, um den „Einen“ zu finden

Jana Duggar äußerte sich offen zu ihrer Suche nach Liebe. Hier ist alles, was sie zu diesem Thema und ihrem fünfjährigen Zeitfenster für die Ehe gesagt hat.

2023-06-12.

Sam Heughan weiß genau, was er vom „Outlander“-Set mitnehmen wird – „Ich fühle mich wie Jamie, wenn ich sie anziehe“

„Outlander“-Star Sam Heughan verriet kürzlich, was er vom Set mitnehmen wird, um an Jamie Fraser zu erinnern, die Rolle, die ihn zum Star gemacht hat.

2023-06-12.

Der frühe Beatles-Song, der laut einem Fab-Four-Insider einer der „aufregendsten Auftritte“ der Band war

„She Loves You“ wurde in einer Stunde geschrieben, an einem Tag aufgenommen und war der Song der Beatles mit einem ihrer besten Auftritte in ihrer Karriere.

2023-06-11.

Dolly Parton half ihrer „invaliden“ Großmutter, als keines der anderen Enkelkinder es tat – sie machte ihr auch Streiche

Dolly Parton und ihre Oma Bessie hatten eine besondere Beziehung. Oma Parton war sehr krank, aber das hielt Dolly nicht davon ab, ihr einen Streich zu spielen.

2023-06-11.

Ursprünge des Islam: Eine Religionsgeschichte

Die Ursprünge des Islam lassen sich bis ins frühe 7. Jahrhundert auf der Arabischen Halbinsel zurückverfolgen. Der Islam entstand in der Stadt Mekka, wo ein Mann namens Mohammed, ein erfolgreicher Kaufmann aus einem mächtigen Stamm, eine göttliche Offenbarung empfing.

2025-12-03.

10 der furchterregendsten Meereskreaturen, die in den Tiefen des Ozeans lauern

Der Ozean ist voller Schönheit, birgt aber auch einige der furchterregendsten Meeresbewohner unseres Planeten. Viele dieser Tiere lauern tief unter der Meeresoberfläche, in der dunklen, von hohem Druck geprägten Tiefsee.

2025-10-29.

Die 10 besten Schwertverzauberungen in Minecraft

Wenn du gegen feindliche Monster kämpfst oder dich für PvP-Situationen ausrüstest, kann dir das Wissen um die besten Schwertverzauberungen in Minecraft einen entscheidenden Vorteil verschaffen. Durch das Verzaubern von Schwertern verursachst du mehr Schaden, erhältst mehr Beute von Monstern und verlängerst die Haltbarkeit deines Schwertes.

2025-10-29.

The Bear-Zusammenfassung: Ist Marcus der netteste, sanfteste und aufrichtigste Mann in Chicago?

„Children“ hinterlässt einen Cameo-Auftritt eines großen Namens und einige verheerende Neuigkeiten

2024-07-03 19:12.

Würden Sie für 9.800 US-Dollar Ihren Wagen in diesen siebensitzigen Toyota RAV4 Baujahr 2008 packen?

Dieser RAV4 soll sich in ausgezeichnetem Zustand befinden und ist bereit für eine Partie Reise nach Jerusalem.

2024-07-03 19:04.

Marvels Black Panther Show wird die bisher bedeutendste Animationsserie

„Eyes of Wakanda“ ist direkt mit dem MCU verknüpft und bietet Updates zu „X-Men ’97“, „What If...“, „Daredevil“ und mehr.

2024-07-03 19:03.

Anna Wintour tritt nach 37 Jahren als Chefredakteurin der Vogue zurück – und sie stellt ein!

Die langjährige Chefredakteurin, die 1988 zur amerikanischen Vogue kam, verkündete die Neuigkeit am Donnerstagmorgen, dem 26. Juni, in einer Mitarbeiterbesprechung.

2025-06-27.

Ava Gardners Dating-Geschichte: Ein Rückblick auf die Ehen und Romanzen der Hollywood-Ikone

Ava Gardner war mit Mickey Rooney und Frank Sintra verheiratet und datete mehrere andere Hollywoodstars. Hier ist ein Rückblick auf Ava Gardners Dating-Geschichte.

2024-06-23.

3 bewährte Möglichkeiten, Ihre Schreibfähigkeiten zu verbessern

Die Vorteile des Schreibens und Strategien, die Ihnen dabei helfen

Im Jahr 2022, mit der Veröffentlichung von GPT-3, scheinen Schreibfähigkeiten an Bedeutung zu verlieren. Mit KI können auch Menschen mit schlechten Schreibkenntnissen hochwertiges Personal hervorbringen.

Die langsame Erosion: Enthüllung der Art und Weise, wie Menschen in ihrer Karriere verkümmern

In der heutigen schnelllebigen und wettbewerbsintensiven Welt spielt die Karriere eine wichtige Rolle für das persönliche Wachstum, die finanzielle Stabilität und die allgemeine Lebenszufriedenheit. Viele Menschen befinden sich jedoch in einem unerbittlichen Kreislauf aus Stagnation und Unzufriedenheit, der ihr Berufsleben allmählich verkümmert.

Was macht einen Podcast einflussreich?

Letzte Woche fiel mir eine Pressemitteilung auf, die über PressGazette (eine britische Nachrichten-Website für Medien) verschickt wurde. In dem Artikel wurde angekündigt, dass Acast, das skandinavische Podcast-Hosting- und Werbeunternehmen, ein Konsortium der „wahrscheinlich einflussreichsten“ Verlage im Podcasting leiten werde.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi