显示布尔玛轮播
Display bulma carousel
我是布尔玛的新手。我正在尝试旋转木马扩展,但它不起作用。我复制了一个示例,并按照文档进行了研究,但仍然无效。谢谢你的帮忙!这是我的代码:
<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 集成到您的项目中,请按照以下步骤操作:
Link Bulma-Carousel 的 CSS file of Bulma and the CSS and JS 个文件。
然后,在单独的 .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,
});
我是布尔玛的新手。我正在尝试旋转木马扩展,但它不起作用。我复制了一个示例,并按照文档进行了研究,但仍然无效。谢谢你的帮忙!这是我的代码:
<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 集成到您的项目中,请按照以下步骤操作:
Link Bulma-Carousel 的 CSS file of Bulma and the CSS and JS 个文件。
然后,在单独的 .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,
});