Как использовать Bulma Carousel с реагировать? - PullRequest
Новая
       34

Как использовать Bulma Carousel с реагировать?

2 голосов
/ 18 июня 2019

Я скачал булма-карусель с NPM.Я пробовал поискать в Google и искать ответы на других форумах, но безрезультатно.

my 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 componentfile 

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 экспортируется в компонент моего приложения через другие компоненты.

Моя страница выглядит как куча картинок, накладывающихся друг на друга.Я установил фреймворк bulma до того, как скачал bulma-carousel и успешно использовал такие классы, как Hero и столбцы, так что проблем здесь нет.Я не загружал расширение bulma, потому что мне не нужны все из них.Я не уверен в том, где поставить / использовать bulma-carousel js, поэтому я помещаю их повсюду, чтобы посмотреть, изменится ли он, но он не изменился.неправильно кроме карусели

...