wikiki / bulma-carousel Goto Github PK
View Code? Open in Web Editor NEWDisplay a carousel
License: MIT License
Display a carousel
License: MIT License
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:
bulma-carousel.sass
Module build failed: ModuleBuildError: Module build failed:
@import "~bulma-carousel";
^
File to import not found or unreadable: ~bulma-carousel.
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 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"
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:
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.
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
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
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:
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.