Bulma's extension to display a Carousel
Looking for new Maintainer
As you may have noticed, this package has not been updated for some time. I'm sorry, but unfortunately I'm not able to continue to maintain it, so I'm looking for someone who would like to take it over and maintain it. If you are interested, please contact me at [email protected] to discuss how to proceed.
Documentation & Demo
You can find the Documentation and a demo here
Uncaught ReferenceError: bulmaCarousel is not defined
Hi, In my Laravel project, carousel is included
produces the said error. Carousel styling is fine but slider part is not working.
Any suggestion? Thanks!
Several errors after update to 2.0.0
Maybe the problem is me but:
Need support for React
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?
Multiple carousel on Angular
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
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
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.
Angular compatibility fixes
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.
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:
which I'm pretty sure was a bug, if items has 1 element, it matches that statement, but then you're setting to items which would fail and cause issues when applying classes to null items.
should definitely fix #27 , potentially fixes or related to #30
Previous makes the carousel jump
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
HH:mm. Is it correct?
Fix failure in build
The following error occurred for the added package.
Fix failure in build
I get the following error.
Bugs: The carousel does not work when you click on return the image is lost.
carousel-animate-slide => (it works by clicking on return) Problem: carousel-animate-fade => (It does not work when you click on return) | Image disappears
how to re attach after loading new items
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
I tried to use destroy() with no luck
effect: 'fade' not show image
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?
Navigation breaks when doubleclicking
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
Incorrect transition values
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?