Hi, In my Laravel project, carousel is included

require('bulma-extensions/bulma-carousel/dist/bulma-carousel');

but

var carousels = bulmaCarousel.attach();

produces the said error. Carousel styling is fine but slider part is not working.

Any suggestion? Thanks!

Maybe the problem is me but:

• Couldn't find bulma-carousel.sass

Module build failed: ModuleBuildError: Module build failed:
@import "~bulma-carousel";
^
      File to import not found or unreadable: ~bulma-carousel.

• Autoplay doesn't work
• Navigation between slider images doesn't work either

I'm using bulma in a react app and would like to use bulma-carousel. Unfortunately the .js bindings do not fire because at DOMContentLoaded time, the (dynamically created) carousel does not yet exist. Might you repackage the js bindings such that they can be dynamically fired at the React.Component.componentDidMount() event?

Hello, I'm trying to use multiple carousels on the same page, with Angular5+. But after adding the second carousel on page, nothing else works, neither the animation nor the navigation buttons.

Does something need to be done to function properly?

Hi Have difficulties to install the extension. Where bulma-caroussel folder should be? In the same folder than bulma.css ? Or anywhere? Furthermore in https://wikiki.github.io/components/carousel/ it's written <script type="text/javascript" src="./carousel.min.js"></script> however, the file is named bulma-caroussel.min.js in the extension's folder. Where this could should go? In head or before the end of file?

For now, with your example code, I get images and controls but no caroussel (even if js file is loaded). Thanks Mel

bulma-carousel is not working in my project I installed bulma-carousel using yarn.

This is how I import bulma-carousel in app.scss and in app.js and this is how I link in my index

By the way I'm using Laravel, VueJS, Bulma, Laravel Mix, and webpack.

Only tested with angular, but this should probably fix integration with other frameworks like vue and react as well. One big caveat to this is I removed the on dom ready auto-attachment. Frameworks like angular and react (and I think vue?) have their own shadow dom that is a separate ready event. Adding this method lets you attach when your framework of choice is ready.

The downside is if you're not using a framework like these, you'll have to manually call Carousel.attach() after loading the script on the page.

Also sorry for all the formatting changes, my code editor reformats automatically and I didn't even think about it before I worked through the changes.

Main Changes:

• Added static attach method to attach the carousel instead of just auto-attaching at run time. This is allows angular to re-attach if it dynamically changes the carousel items.

• Added 100ms buffer to the element attachment (in the static attach method). For some reason in angular, things were just flying too fast, and it would try to attach before angular was finished with the dom.

• Line 221 had this:

if (this.items.length >= 1) {

which I'm pretty sure was a bug, if items has 1 element, it matches that statement, but then you're setting to items[1] which would fail and cause issues when applying classes to null items.

should definitely fix #27 , potentially fixes or related to #30

as in the codepen https://codepen.io/JohnMica/pen/WMBeyj?editors=1010

active image is image 3 press previous carousel jumps to image 1 and slides to image 2

not sure why this is (i was expecting a 'reverse' in the slide animation)

On the documentation page: https://demo.creativebulma.net/components/carousel//#options

It says that the default value for pagination is HH:mm. Is it correct?

Name | Description | Default value
pagination | Display pagination bullets | HH:mm

Add package

The following error occurred for the added package.

Error: Cannot find module 'XXX'

Fix failure in build

I get the following error.

[13:48:51] 'build:styles:copy' errored after 3.87 ms
[13:48:51] Error: File not found with singular glob: /path/bulma-carousel/src/sass/index.scss (if this was purposeful, use `allowEmpty` option)

carousel-animate-slide => (it works by clicking on return) Problem: carousel-animate-fade => (It does not work when you click on return) | Image disappears

<section class="hero is-medium has-carousel">
  <div class="hero-carousel carousel-animated carousel-animate-fade">
    <div class='carousel-container'>
      <div class='carousel-item has-background is-active'>
        <img class="is-background" src="{{ 'assets/img/tour/1.png'| theme }}" alt="" />
      </div>
      <div class='carousel-item has-background'>
        <img class="is-background" src="{{ 'assets/img/tour/5.jpg'| theme }}" alt="" />
      </div>
      <div class='carousel-item has-background'>
         <img class="is-background" src="{{ 'assets/img/tour/3.png'| theme }}" alt="" />
      </div>
      <div class='carousel-item has-background'>
        <img class="is-background" src="{{ 'assets/img/tour/4.jpg'| theme }}" alt="" />
      </div>
    </div>
    <div class="carousel-navigation is-overlay">
      <div class="carousel-nav-left">
        <i class="fas fa-chevron-left" aria-hidden="true"></i>
      </div>
      <div class="carousel-nav-right">
        <i class="fas fa-chevron-right" aria-hidden="true"></i>
      </div>
    </div>
  </div>

  <div class="hero-body has-text-centered">
    <div class="columns is-mobile is-centered">
      <div class="column is-half is-narrow">
        <div class="field has-addons">
          <div class="control is-expanded">
            <input class="input" type="text" placeholder="Find a repository">
          </div>
          <div class="control">
            <a class="button is-info">
              Search
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Hi. I'm in electron js I want to reload carousel items after user open a dir with images. I tried changing img src of already working carousel, works but of course this isn't dynamic

Then I tried to attach() after appending al items but it hangs the page in white. dev tools shows a modal saying

DevTools was disconnected from page.
Once page is reloaded, DevTools will automatically reconnect

I tried to use destroy() with no luck

Hi,

I use bulma.io v0.9.1 and try the last version from hire also the one to fix this fade effect issue .. still the same situation I can't see the carousel ... any solution?

T.

When I doubleclick on the navigation buttons when the carousel is on the farleft or farright, it gets stuck on that item. Page reload required to get out.

This is also visible on the demo => Go to the Default demo, click right once, double click left => Demo stuck on first item.

Possibly related to #104

If I load this site while the dev tool is opened and docked to the right, and close the dev tool after loading the site, I see this abnormality: Anybody knows why?

I think it's because the package doesn't update the clientWidth (if it's changed) and adjust the transition amount (in px unit). Someone already created a PR about the issue. Looks like nobody's home to merge it.