Display bulma carousel

I am new to Bulma. I'm trying the carousel extension but it doesn't work. I have copied one example and I followed the documentation and did research but still it does not work. Thank you for helping! Heres my code:

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

Solution

First of all, You can't include scripts directly from Github. Try using a CDN instead.

In order to integrate Bulma-Carousel to your project follow the steps below:
Link the CSS file of Bulma and the CSS and JS files of Bulma-Carousel.
Then, initialize Bulma-Carousel in a seperate .js file.

Here's a starter project to help you get started:

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,
});