我是 Bulma 的新手。我正在尝试旋转木马扩展，但它不起作用。我复制了一个示例，并按照文档进行了研究，但仍然无效。感谢您的帮助!这是我的代码:
<script type="text/javascript" src="https://wikiki.github.io/node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.js"></script>
<script>
$(document).ready(function(){
bulmaCarousel.attach();
});
</script>
最佳答案
首先，您不能直接从 Github 添加脚本。 尝试使用 CDN相反。
为了将 Bulma-Carousel 集成到您的项目中，请按照以下步骤操作:
链接 CSS Bulma 和 CSS 的文件和 JS Bulma-Carousel 文件。
然后，在单独的 .js 文件中初始化 Bulma-Carousel。
这是一个帮助您入门的入门项目:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/css/bulma-carousel.min.css" />
<script defer src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
<script defer src="scripts.js"></script>
</head>
<body>
<section class="section">
<div class="container is-clipped">
<div id="slider">
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550921082-c282cdc432d6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 1
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550945771-515f118cef86?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 2
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550971264-3f7e4a7bb349?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 3
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550931937-2dfd45a40da0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 4
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image is-16by9 is-covered">
<img
src="https://images.unsplash.com/photo-1550930516-af8b8cc4f871?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
alt=""
/>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 5
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
<div class="card">
<div class="card-image">
<figure class="image video-container is-16by9">
<iframe type="text/html" src="https://www.youtube.com/embed/H0v773vKS_U" frameborder="0"></iframe>
</figure>
</div>
<div class="card-content">
<div class="item__title">
Mon titre 6
</div>
<div class="item__description">
Ici une petite description pour tester le slider
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
scripts.js
bulmaCarousel.attach('#slider', {
slidesToScroll: 1,
slidesToShow: 3,
infinite: true,
});
关于javascript - 显示 bool 玛轮播，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51438716/