logo标签列表

如何在ReactJS中使用Bulma Carousel?

javascriptreactjscarouselbulma
4

我使用NPM下载了Bulma-carousel。我已经尝试在各种论坛中搜索和查看其他答案，但没有结果。

我的index.html

<!DOCTYPE html>
<head>

    <script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
    <link rel="stylesheet" href="bulma-carousel.min.css">
    <!-- <script src="~bulma-carousel/dist/js/bulma-carousel.min.js"></script> -->
    <title>GIS</title>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

<script>
    $(document).ready(function(){
        var carousels = bulmaCarousel.attach(); // carousels now contains an array of all Carousel instances
    });
</script>
</body>
</html>

我的轮播组件文件

import React from 'react';
import bulmaCarousel from 'bulma-carousel';


class Pictures extends React.Component {
    constructor(props) {
        super(props);
        var carousels = bulmaCarousel.attach('.carousel', {
            slidesToScroll: 1,
            slidesToShow: 3
        });

    }
    render() {
        return (
            <div>
                <div class='carousel carousel-animated carousel-animate-slide'>
                    <div class='carousel-container'>
                        <div class='carousel-item has-background is-active'>
                            <img class="is-background" src="" alt="" width="640" height="310" />
                            <div class="title">Merry Christmas</div>
                        </div>
                        <div class='carousel-item has-background'>
                            <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
                            <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
                        </div>
                        <div class='carousel-item has-background'>
                            <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
                            <div class="title">Sushi time</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Pictures

通过其他组件，图片组件被导出到我的应用程序组件中。

我的页面看起来就像一堆图片堆叠在一起。我之前已经安装了 Bulma 框架，并成功使用了 Hero 和 columns 等类，所以这里没有问题。我没有下载 bulma-extension，因为我不需要全部扩展。我不确定该将 bulma-carousel js 放在哪里或如何使用它，所以我尝试将它们放在各处看看是否会改变，但没有

我还很新于 ReactJS，如果除了轮播图还有其他的问题，请见谅。

1
控制台有报错吗？也许尝试另一个版本的bulma轮播组件。尝试4.0.1或3.0.0。 - Nico Diz
@NicoDiz 即使我使用了另一个版本，我仍然需要指导如何在我的项目中正确地整合bulma-carousel，例如哪个语法应该放在哪个文件中。我对这部分仍然感到困惑。 - Firdaus Indradhirmaya
1
你可能需要在componentDidMount()中使用bulmaCarousel.attach()。请参考https://github.com/Wikiki/bulma-carousel/issues/30。 - Vijay Venugopal Menon
1个回答
2

看起来您试图过早地附加您的轮播组件。请将您的组件更新为以下内容：

原始答案： Original Answer

import React from 'react';
import bulmaCarousel from 'bulma-carousel/dist/js/bulma-carousel.min.js';


class Pictures extends React.Component {
    constructor(props) {
        super(props);

    }
    componentDidMount() {
      var carousels = bulmaCarousel.attach('.carousel', {
        slidesToScroll: 1,
        slidesToShow: 1
      });
    }
    render() {
        return (
            <div>
                <div class='carousel carousel-animated carousel-animate-slide'>
                    <div class='carousel-container'>
                        <div class='carousel-item has-background is-active'>
                            <img class="is-background" src="" alt="" width="640" height="310" />
                            <div class="title">Merry Christmas</div>
                        </div>
                        <div class='carousel-item has-background'>
                            <img class="is-background" src="https://wikiki.github.io/images/singer.jpg" alt="" width="640" height="310" />
                            <div class="title">Original Gift: Offer a song with <a href="https://lasongbox.com" target="_blank">La Song Box</a></div>
                        </div>
                        <div class='carousel-item has-background'>
                            <img class="is-background" src="https://wikiki.github.io/images/sushi.jpg" alt="" width="640" height="310" />
                            <div class="title">Sushi time</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Pictures
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接