我想在Vue.js的组件中为Bootstrap 4的轮播运行轮播间隔功能。当我粘贴到index.html中的脚本标签时,它可以工作。但是我不能在组件中运行。我该如何运行?

我在这里提到的代码:

$(".carousel").carousel({
    interval: 200
  });


<template>
  <div
    id="slider-1"
    class="carousel slide pull-full-screen"
    data-ride="carousel"
  >
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="../images/slides/cycling.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="../images/slides/diving.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="../images/slides/parachuting.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
  </div>
</template>

最佳答案

尝试将此语句放入mounted挂钩中,如下所示:

   mounted(){
       $(".carousel").carousel({ interval: 200 });
    }


检查this codepen sample

10-05 21:08
查看更多