如何使用带有reactjs的bulma轮播？

Question

I downloaded bulma-carousel with NPM. 我用NPM下载了bulma-carousel。 I have tried googling and looking at other answers from various forum to no avail. 我试过谷歌搜索并查看各种论坛的其他答案无济于事。

my index.html 我的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>

my carousel component file 我的轮播组件文件

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

The Picture component is then exported to my App component through other components. 然后，Picture组件将通过其他组件导出到我的App组件。

My page just looks like a bunch of pictures stack on top of each other. 我的页面看起来就像一堆图片堆叠在一起。 I did install bulma framework before i downloaded the bulma-carousel and use classes like Hero and columns successfully, so there isn't a problem there. 我在下载bulma-carousel之前安装了bulma框架并成功使用了Hero和列等类，所以没有问题。 I didnt download bulma-extension because i dont need all of them. 我没有下载bulma-extension，因为我不需要所有这些。 Im unsure of where to put/use the bulma-carousel js, so i put them everywhere to see if it changes but it didn't 我不确定在哪里放/使用bulma-carousel js，所以我把它们放在任何地方，看它是否有变化，但它没有

Im also new to reactjs, so forgive me if there are other things are wrong besides the carousel 我也是反应新手，所以请原谅我，除了旋转木马之外还有其他问题

Answer 1

It looks like you're trying to attach your carousel too early. 看起来你正试图过早地附上你的旋转木马。 Update your component to the following: 将组件更新为以下内容：

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

如何使用带有reactjs的bulma轮播？

问题描述

1 个解决方案

解决方案1
1 2019-08-15 05:57:50

如何使用带有reactjs的bulma轮播？

问题描述

1 个解决方案

解决方案1 1 2019-08-15 05:57:50

解决方案1
1 2019-08-15 05:57:50