Я зацикливался на этой проблеме в течение нескольких часов и, кажется, не могу найти ответ где-нибудь в сети ... Я работаю над приложением 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>
@boussadjrabrahim, похоже, ничего не произошло. Разделы слайдов отображаются как разделы под родительским классом раздела.






Из документов https://github.com/alvarotrigo/vue-fullpage.js#bundler-webpack-rollup
Also, you'll have to add the fullPage CSS file (fullpage.min.css). Is up to you how you add it. You can add it on the HTML page or bundle it with other CSS files, or import it with Javascript.
Вы можете сделать это с помощью оператора импорта в вашем компоненте vue
import "fullpage.js/dist/fullpage.css";
вы пытались поместить этот
$('#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);в ловушкуmountedвашего app.vue