Question

我用NPM下载了bulma-carousel。我尝试使用Google搜索，并在各种论坛中查看其他答案都没有用。

我的 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

然后将Picture组件通过其他组件导出到我的App组件。

我的页面看起来就像是一堆彼此叠在一起的图片。在下载bulma-carousel之前，我确实安装了bulma框架，并成功使用了Hero和column这样的类，因此那里没有问题。我没有下载bulma-extension，因为我不需要所有它们。我不确定在哪里放置/使用bulma-carousel js，因此我将它们放置在各处以查看它是否发生了变化，但没有改变

我也是reactjs的新手，因此，除了轮播之外，如果还有其他错误，请原谅我

Answer 1

您似乎过早尝试安装轮播。将组件更新为以下内容：

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

如何将bulma旋转木马与reactjs一起使用？

1 个答案: