fullpage.js 滑块的问题

Posted 2023-02-22

【中文标题】fullpage.js 滑块的问题

【英文标题】：Problems with the fullpage.js slider

【发布时间】：2019-02-20 03:50:48

【问题描述】：

我已经被这个问题困扰了几个小时，我似乎无法在网上的任何地方找到我的答案......我正在开发一个 vue-cli 应用程序，并且我正在使用带有 vue.js 的 fullpage.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>

【问题讨论】：

您是否尝试将这个$('#fullpage').fullpage( keyboardScrolling:false, scrollbar: false, scrollOverflow: false, autoScrolling:false, menu:true, slidesNavigation:true, slidesNavPosition: 'top', slideSelector: '.slide', ); $.fn.fullpage.setMouseWheelScrolling(false); $.fn.fullpage.setAllowScrolling(false); 放在您的app.vue 的mounted 挂钩中

@boussadjrabrahim 似乎没有任何意义。幻灯片 div 显示为父部分类下的部分。

【参考方案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";