.Js / .css फ़ाइलों को .svelte घटक में जोड़ें

Question

मैं स्वीपर स्लाइडर जोड़ना चाहता हूँ svelte, मेरा सवाल है:

1. स्क्रिप्ट टैग में सीएसएस जोड़ना संभव है, जैसे:

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

क्योंकि सिर से आयात मुश्किल है ( नोड में आयात css_modules svelte के लिए )

1. मैं swiper.jsफ़ाइल को svelte में जोड़ता हूं , और यह लगभग काम करता है। यह टच (माउस) पर काम करता है, लेकिन बटन नहीं ( .swiper-button-next .swiper-button-prev)। क्या विशेष आयात मौजूद हैं .js फ़ाइल नियम?

कोड उदाहरण: https://codesandbox.io/s/musing-leavitt-ygstx?file=/App.svelte:224-243

Answer 1

1. रोलअप के साथ आप सीएसएस फ़ाइल आयात कर सकते हैं जैसे आप एक .jsमॉड्यूल के लिए करेंगे :

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

1. नेविगेशन मुद्दे के लिए यह स्विपर प्रलेखन में लिखा गया है :

डिफ़ॉल्ट रूप से स्विपर अतिरिक्त मॉड्यूल (जैसे नेविगेशन, पेजिनेशन, आदि) के बिना केवल कोर संस्करण निर्यात करता है। इसलिए आपको उन्हें भी आयात और कॉन्फ़िगर करने की आवश्यकता है:

// 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(...);

तो आखिरकार, आपके कंपोनेंट इनिशिएशन को इस तरह किया जा सकता है:

<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>

यहाँ कोडैंडबॉक्स के लिए लिंक दिया गया है ।