Карусель в Vue - Bootstrap загружается не так, как задумано - PullRequest
Новая
       13

Карусель в Vue - Bootstrap загружается не так, как задумано

0 голосов
/ 10 июля 2020

Я пытаюсь построить карусель, используя Vue Bootstrap. По какой-то причине все изображения карусели видны одновременно. Я проверил элемент проверки, и только одно из изображений является активным одновременно.
Я установил все необходимые зависимости. Однако это все еще не работает.

Home. vue Файл 

<div class="Home">
    <b-carousel
      id="carousel-fade" fade indicators>
      <b-carousel-slide caption="First slide" img-src="coffee-roaster.jpg"></b-carousel-slide>
      <b-carousel-slide caption="Second Slide" img-src="coffee-plant.jpg"></b-carousel-slide>
      <b-carousel-slide caption="Third Slide" img-src="coffee-bean.jpg"></b-carousel-slide>
    </b-carousel>
</div>

main. js file 
// Bootstrap import
import {
  BootstrapVue, IconsPlugin, CarouselPlugin, VBScrollspyPlugin, LayoutPlugin,
} from 'bootstrap-vue';
// Bootstrap Dependencies
import PortalVue from 'portal-vue';
// Vee-Validate
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
import {
  alpha, required, email, is,
} from 'vee-validate/dist/rules';
// Vue Imports
import Vue from 'vue';
import App from './App.vue';
import router from './router';

// Initialise in the app
// BootStrap
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(LayoutPlugin);
Vue.use(VBScrollspyPlugin);
Vue.use(CarouselPlugin);
Vue.use(PortalVue);

// Vee-Validate
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('ValidationObserver', ValidationObserver);
extend('alpha', {
  ...alpha,
  message: 'Please input a valid email',
});
extend('email', {
  ...email,
  message: 'Please input a valid email',
});
extend('required', {
  ...required,
  message: 'This field is required',
});
extend('is', {
  ...is,
  message: 'Please accept the Terms and Conditions',
});

Vue.config.productionTip = false;

new Vue({
  components: {
    ValidationProvider,
    ValidationObserver,
  },
  router,
  render: (h) => h(App),
}).$mount('#app');

Результат введите описание изображения здесь

...