Display a carousel

  • By null
  • Last update: Sep 14, 2022
  • Comments: 15

bulma-carousel

Bulma's extension to display a Carousel

npm npm Build Status

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

Github

https://github.com/Wikiki/bulma-carousel

Comments(15)

  • 1

    Uncaught ReferenceError: bulmaCarousel is not defined

    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!

  • 2

    Several errors after update to 2.0.0

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

    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?

  • 4

    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?

  • 5

    Install

    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). image Thanks Mel

  • 6

    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.

  • 7

    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.

    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

  • 8

    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)

  • 9

    pagination documentation

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

    Fix failure in build

    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)
    
  • 11

    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

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

    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

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

    I tried to use destroy() with no luck

  • 13

    effect: 'fade' not show image

    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.

  • 14

    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

  • 15

    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: image 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.