wikiki / bulma-carousel Goto Github PK

I installed thru npm.

and I imported the module under App.vue
Not sure is the way I imported it having problem or something else, if I import it like this:

<style lang="sass">
@import '~bulma'
@import '~bulma-carousel'

the npm will throw an Module build failed error:
Invalid CSS after "!": expected 1 selector or at-rule, was '!function(e,t){"obj' in F:\axd-tech-web-portal\node_modules\bulma-carousel\dist\js\bulma-carousel.min.js (line 1, column 1)

if I only import the sass:
<style lang="sass">
@import '~bulma'
@import '~bulma-carousel/dist/css/bulma-carousel'

it renders just fine but it lost the functionality of navigation, animation, etc that requires JS.

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!

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

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 know my carousel is working because I can click the navigation elements and it slides correctly.

Also worth noting is if I leave off the bulmaCarousel.attach() it stops working.

However,

  var carousels = bulmaCarousel.attach();
  console.log(carousels.length);

always returns 0 for me, and I can't get a hold of any of the instances to listen to their events. Even if I try to select them directly with jQuery selectors.

Any ideas?

Tried the first example here https://wikiki.github.io/components/carousel/ on firefox and it's not working.

When setting the fade effect, the carousel collapses, decided as follows:

.carousel-item.is-active {
    position: relative !important;
}

It would be nice to set the auto-sliding option ...

If the image is specified inside an href, swiping left and right no longer works

Hello.

If I try to add carousel items using ngFor, I receive an Uncaught TypeError.

Uncaught TypeError: Cannot read property 'classList' of undefined
    at Carousel._initOrder (scripts.bundle.js:105)
    at Carousel.init (scripts.bundle.js:47)
    at new Carousel (scripts.bundle.js:15)
    at scripts.bundle.js:250
    at NodeList.forEach (<anonymous>)
    at HTMLDocument.<anonymous> (scripts.bundle.js:249)
    at ZoneDelegate.invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:421)
    at Zone.runTask (webpack-internal:///../../../../zone.js/dist/zone.js:188)
    at ZoneTask.invokeTask [as invoke] (webpack-internal:///../../../../zone.js/dist/zone.js:496)
    at invokeTask (webpack-internal:///../../../../zone.js/dist/zone.js:1540)

<div class="carousel-container-custom">
      <div class='carousel carousel-animated carousel-animate-fade' data-autoplay="true">
          <div *ngIf="articleData" class='carousel-container'>            
                <div *ngFor="let article of articleData.articles; let i=index" class='carousel-item has-background is-active'>
                    <img *ngIf="articleData" class="is-background" src={{articleData.articles[i].urlToImage}} alt="{{articleData.articles[i].description}}" width="640" height="310" />
                    <div *ngIf="articleData" class="title">{{articleData.articles[i].author}} : {{articleData.articles[i].title}}</div>
                </div>                    
          </div>
          <div class="carousel-navigation is-overlay">
            <div class="carousel-nav-left">
              <i class="fa fa-chevron-left" aria-hidden="true"></i>
            </div>
            <div class="carousel-nav-right">
              <i class="fa fa-chevron-right" aria-hidden="true"></i>
            </div>
          </div>
        </div>
  </div>

I got an error...

"bulma-carousel": "^1.0.11"

 ERROR  Failed to compile with 1 errors                                 00:07:01
 error  in ./node_modules/bulma-carousel/dist/bulma-carousel.sass
Module build failed: Unknown word (56:14)
  54 |       transform: translateX(-100%)
  55 |     @each $size in $carousel-sizes
> 56 |       &.is-#{$size}
     |              ^
  57 |         .carousel-container
  58 |           transform: translateX(calc(-100% / #{$size}))
  59 |

$carousel-sizes: (2, 3, 4, 5) !default
/*    */
  &.is-reversing
    .carousel-container
      transform: translateX(-100%)
    @each $size in $carousel-sizes
      &.is-#{$size}
        .carousel-container
          transform: translateX(calc(-100% / #{$size}))

Hi there,

bulma-carousel 3.0.0
vue-awesome 3.0.3

In the hero carousel, the navigation icons doesnt appear:

<section class="hero is-fullheight has-carousel">
  <div class="hero-carousel carousel-animated carousel-animate-fade">
    ...
    <div class="carousel-navigation is-overlay">

      <!-- Added as a matter of test, the one below will appear-->
      <icon name="chevron-left" aria-hidden="true"></icon>

      <div class="carousel-nav-left">
        <!-- However this one doesnt appear -->
        <icon name="chevron-left" aria-hidden="true"></icon>
      </div>

      ...
    </div>
  </div>
</section>

Any ideas?

I checked in the example documentation page and I can see the same error.

Any idea why is this happening?

I can see extra 'css' and 'js' added on path for this particular extension than rest of the extensions in bundle. Is this intentional? Also latest bundle release still uses old paths. Is it possible to bump bundle version with this changes? Thanks

Default slide direction of carousel is right to left. In this direction up coming image pushes the current image to left. However when we press navigation left arrow to slide in opposite direction, it used white space instead.

Loop should be continuity of images in either direction.

Thanks!

Hi,

I'm using VueJs as my companion on front-end and I wanna change hero nav color based on carousel item displayed. So, I think we can implement Javascript Custom Events to inform DOM what carousel item is on front.

I read about that in https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Thanks.

Request to add navigation dots to bulma-carousel if possible. Thank you 😄

In a carousel with multiple data items, when the next and previous arrows are pressed the carousel slide by one and goes to the next element, having the ability to slide by multiple(specified number) items would be useful.

Hi!

Noticed a slight issue when using carousel-animate-fade, the first slide doesn't apply the fade animation correctly when switching to the next slide. There after it works correctly, can you replicate this issue?

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, I have different carousels on different routes of my project. When the page is load/reload on the navigator, the carousel is perfectly showed. But when I click on a routerLink for enter a new page with another carousel, the page appear but without the respective carousel.

Anyone use this carousel with routers?

My package on the project
"@angular/animations": "7.0.2",
"@angular/common": "7.0.2",
"@angular/compiler": "7.0.2",
"@angular/core": "7.0.2",
"@angular/forms": "7.0.2",
"@angular/http": "7.0.2",
"@angular/platform-browser": "7.0.2",
"@angular/platform-browser-dynamic": "7.0.2",
"@angular/router": "7.0.2",
"animate.css": "^3.7.0",
"bulma": "^0.7.2",
"bulma-carousel": "^3.0.0",
"core-js": "^2.5.7",
"rxjs": "^6.3.3",
"zone.js": "^0.8.26"

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/Wikiki/bulma-carousel.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Thank you for your work. I am using the latest extensions, and noticed on my site that scrolling is sluggish on mobile. When I try to swipe up or down on pages like this, https://esolia.com/helpdesk/, the site is not so responsive to my finger swiping, for some reason. It works, but it is like there is a "resistance" to the swiping.

I notice in the console this sort of error I pasted below, and wonder if it's relevant and if there is anything to be done?

Kind regards
Rick

[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
bulma-quickview.js:40 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-quickview.js:40
(anonymous) @ bulma-quickview.js:39
(anonymous) @ bulma-quickview.js:35
bulma-quickview.js:55 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-quickview.js:55
(anonymous) @ bulma-quickview.js:54
(anonymous) @ bulma-quickview.js:50
bulma-carousel.js:270 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-carousel.js:270
_bindEvents @ bulma-carousel.js:269
init @ bulma-carousel.js:235
Carousel @ bulma-carousel.js:147
(anonymous) @ bulma-carousel.js:161
bulma-carousel.js:283 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) @ bulma-carousel.js:283
_bindEvents @ bulma-carousel.js:282
init @ bulma-carousel.js:235
Carousel @ bulma-carousel.js:147
(anonymous) @ bulma-carousel.js:161
bulma-carousel.js:295 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Hello, do you mind adding parallax effect in carousel, especially hero carousel? Thank you.

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)

Again me...
Using prev button on your hero example from docs give a white background. Next button works as expected.
Others examples (non-hero carousel) works for both prev and next.
Thanks

Hey,
Can anybody provide a link to documentation for reactJS. I have been doing a couple of things but my reference is always an empty array.

var carousels = bulmaCarousel.attach();

If the carousel contains only one image, the image is not displayed and clicking any of the navigation buttons generates an error.

<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="https://wikiki.github.io/images/merry-christmas.jpg" alt="" width="640" height="310" />
      <div class="title">Merry Christmas</div>
    </div>
  </div>
  <div class="carousel-navigation">
    <div class="carousel-nav-left">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </div>
    <div class="carousel-nav-right">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </div>
  </div>
</div>

The error generated from the code above if a navigation button is clicked.

Uncaught TypeError: Cannot read property 'classList' of null
    at a._slide (extension.js:180)
    at HTMLDivElement.nextControl.nextControl.addEventListener (extension.js:58)
_slide @ extension.js:180
nextControl.nextControl.addEventListener @ extension.js:58

yup i did the html has-fix-navbar

I noticed that the carousel carousel-nav-left and carousel-nav-right does not display correctly under iOS.
I tested it with different iOS Version and devices.

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.

Auto-scrolling of the carousel would be great!

Im using this carousel within a nuxt app (vuejs framework) - carousel appears displaying an image but it doesn't go to next image automatically (and on click of buttons)

Please help to resolve this issue..

To see the issue

npm install -g npx

npx create-nuxt-app test-bulma (choose bulma as UI framework)
cd test-bulma
npm install
npm install --save bulma-extensions

In nuxt.config.js

  css: [
    { src: 'bulma-extensions/bulma-carousel/dist/bulma-carousel.min.css', lang: 'css' }
  ],

Use carousel in pages/index.vue file.

npm run dev

Carousel appears on localhost:3000 and doesn't animate or go-to-next-image

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository with URL https://github.com/Wikiki/bulma-carousel.git.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment and make sure the repositoryUrl is configured with a valid Git URL.

Good luck with your project ✨

Your semantic-release bot 📦🚀

The demos/docs don't reference nor react to swipe left/right gestures in Chrome, but extension.js seems to have _swipeStart and _swipeEnd methods.

What am I missing?

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>

I'm using CodeKit and am by no means a javascript expert. CodeKit lets you combine javascript into a single minified file, and also transpiles using babel. I have ESLint turned on, and it is choking on the following error:

Babel: Transpiling failed:
SyntaxError: /path/to/bulma/bower_components/bulma-carousel/dist/bulma-carousel.js: "currentActiveItem" is read-only

  104 |     if (!currentActiveItem) {
  105 |       this.items[0].classList.add('is-active');
> 106 |       currentActiveItem = this.items[0];
      |       ^
  107 |     }
  108 |     const currentActiveItemPos = this.items.indexOf(currentActiveItem);
  109 |     if (currentActiveItemPos) {

Is this an actual problem, or, should I take another course of action like, disabling ESLint?
Appreciate any assistance.

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?

Is there a way to expand the amount of slides possible in the carousel?

increasing the amount of slides in the html does not achieve this, it only displays empty slides, if the amount is increased past 5.

Hi, It would greatly help to change the data-size property for different viewports. Could you please help me to make it my project.

It could be useful to be able to customize $carousel-animation-speed and $carousel-animation-method SASS variables.

Using the latest version of Bulma and its extensions and the navigation doesn't seem to be working.

Also there is no button to copy the code off of the code examples, i don't think its showing the entirety of the code either.

Hi,
I used Feram to check your repo
and found the following issue.
I hope it helps!

Use double quote array expansions, otherwise they're like $* and break on spaces.

--- sass-compile-tester.sh
+++ sass-compile-tester.sh
@@ -43,1 +43,1 @@
 # ==============================================================================
 
-run_it $@
+run_it $@
 
 # ==============================================================================

I'm getting this error in my console when using the carousel with autoplay set to true.

extension.js:103 Uncaught TypeError: Assignment to constant variable.
    at a._initOrder (extension.js:103)
    at a.init (extension.js:46)
    at new a (extension.js:12)
    at extension.js:249
    at NodeList.forEach (<anonymous>)
    at HTMLDocument.<anonymous> (extension.js:248)

If you use " Overlay" as navigation you cant click on a link/url in "title" because "is-overlay" is over the title.

The "Learn How" link at the bottom of this page:
https://wikiki.github.io/components/carousel/
in this text:

# Variables
You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

results in a 404.

When you have a carousel with multiple items shown, then when the browser size is changed, the carousel does not resize

Getting this issue when clicking on next / previous buttons to change slides in Chrome 66.

Unable to preventDefault inside passive event listener invocation.

Tried to set 'touch-action' style props on all contained elements, but this did not fix the issue.

hello

can you give me carousel.scss file?

Hello.

Do you plans add mobile touch events to bulma-carousel?
It's very helpful for me (and other site builders with Bulma), because now I use another libs for this with many customizations.

Auto play does not pause when user interacts with the carousel item. Is there any option to pause the auto play on hover?