Question

我一直在这个问题上待了好几个小时，在网络上的任何地方似乎都找不到答案...我正在使用vue-cli应用程序，并且正在将fullpage.js组件与vue.js一起使用。我正在尝试在一个部分上创建横向滑块。到目前为止，我已经按照本文档中的说明进行操作：

https://github.com/alvarotrigo/fullPage.js#creating-links-to-sections-or-slides

但是滑块不起作用。

以下是我的main.js：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import BootstrapVue from 'bootstrap-vue'
import Carousel3d from 'vue-carousel-3d'
import VueFullPage from 'vue-fullpage.js'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/css/style.css';

Vue.config.productionTip = false
Vue.use(BootstrapVue);
Vue.use(Carousel3d);
Vue.use(VueFullPage);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router,
  store
})

以下是我要在其上使用此功能的vue组件：

<template>
    <full-page ref="fullpage" id="fullpage" class="Gallery">
        <section class="section">
            <div class="slide">
                slide 1
            </div>
            <div class="slide">
                slide 2
            </div>
        </section>
    </full-page>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
   data(){
       return {
           half_of_images:Math.ceil(this.$store.state.images.length / 2),
           images: this.$store.state.images,
           options:{
                licenseKey:null,
                slidesNavigation: true

            }
       }
   }
}  
</script>
<style>
 .col , .col > img{
     padding:0px !important;
 }

.col > img {
    border: .5px solid white;
    position:relative;
}
</style>

Answer 1

从文档中，https://github.com/alvarotrigo/vue-fullpage.js#bundler-webpack-rollup

<块引用>

此外，您还必须添加 fullPage CSS 文件 (fullpage.min.css)。取决于你如何添加它。您可以将其添加到 HTML 页面或与其他 CSS 文件捆绑在一起，或使用 Javascript 导入。

您可以在 vue 组件中使用 import 语句来执行此操作

import "fullpage.js/dist/fullpage.css";

fullpage.js滑块出现问题

1 个答案: