Как сделать компонент vue заменяемым в codepen?

avatar
user3718511
8 августа 2021 в 18:45
80
1
0

У меня возникли трудности с использованием https://swiperjs.com/ в codepen vue. Мой код отлично работает с кодом Visual Studio. Но я хочу, чтобы это работало на codepen, но это не работает. Кто-нибудь может мне помочь, пожалуйста?

Вот моя ссылка на codepen

https://codepen.io/iamcoder360/pen/oNWQyzY

Вот мой код vue на codepen

<template>
  <div>
    <swiper
      @swiper="setSwiperRef"
      :slidesPerView="3"
      :centeredSlides="true"
      :spaceBetween="10"
      :pagination="{
        type: 'fraction',
      }"
      :navigation="true"
      :virtual="true"
      class="mySwiper"
    >
      <swiper-slide
        style=""
        v-for="(slideContent, index) in slides"
        :key="index"
        :virtualIndex="index"
        ><img :src="slideContent.img" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/swiper.scss";

import "swiper/components/pagination/pagination.min.css";
import "swiper/components/navigation/navigation.min.css";

import "./style.css";

// import Swiper core and required modules
import SwiperCore, { Pagination, Navigation, Virtual } from "swiper/core";

// install Swiper modules
SwiperCore.use([Pagination, Navigation, Virtual]);

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    // Create array with 3 slides
    const slides = Array.from({ length: 3 }).map(
      (_, index) => `Slide ${index + 1}`
    );
    return {
      slides: [
        {
          id: 1,
          img:
            "https://images.unsplash.com/photo-1628072504294-df57dc522fbd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
        },
        {
          id: 2,
          img:
            "https://images.unsplash.com/photo-1627840935425-3d333bb627f8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
        },
        {
          id: 3,
          img:
            "https://images.unsplash.com/photo-1628008043473-3e2a18a77852?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80",
        },
        {
          id: 4,
          img:
            "https://images.unsplash.com/photo-1628072504294-df57dc522fbd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80",
        },
        {
          id: 5,
          img:
            "https://images.unsplash.com/photo-1627840935425-3d333bb627f8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80",
        },
        {
          id: 6,
          img:
            "https://images.unsplash.com/photo-1628008043473-3e2a18a77852?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80",
        },
      ],
      swiperRef: null,
      appendNumber: 3,
      prependNumber: 1,
    };
  },
  methods: {
    setSwiperRef(swiper) {
      this.swiperRef = swiper;
    },
    slideTo(index) {
      this.swiperRef.slideTo(index - 1, 0);
    },
  },
};
</script>
Источник

Ответы (1)

avatar
Daniel
9 августа 2021 в 05:45
1

потому что codepen не позволяет импортировать такие вещи, как import { Swiper, SwiperSlide } from "swiper/vue";

swiper/vue определено в вашем файле package.json, и кодовая ручка "pen" не позволит вам это сделать. Вместо этого вы можете попробовать использовать CDN, например https://unpkg.com/browse/swiper@6.8.1/, но вам может быть проще использовать stackblitz или codesandbox, что больше похоже на вашу локальную среду разработки.<8832668>90005065>