Проблемы со слайдером fullpage.js

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

вы пытались поместить этот $('#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

Boussadjra Brahim 15.09.2018 21:49

@boussadjrabrahim, похоже, ничего не произошло. Разделы слайдов отображаются как разделы под родительским классом раздела.

Christopher 17.09.2018 12:10
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
789
1

Ответы 1

Из документов 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";

Другие вопросы по теме