Source Code for SSense WebApplication
ssense / vue-carousel Goto Github PK
View Code? Open in Web Editor NEWA flexible, responsive, touch-friendly carousel for Vue.js
Home Page: https://ssense.github.io/vue-carousel/
License: MIT License
A flexible, responsive, touch-friendly carousel for Vue.js
Home Page: https://ssense.github.io/vue-carousel/
License: MIT License
Does vue-carousel support buffering? I can potentially have hundreds of slides but would like to only render a limited number - say 5 - at a time
Hello, i am trying to get the this.currentPage variable outside of the Carousel so that i can set another variable.
How can i do this?
The license reads MIT in the website footer but is specified as ISC in package.json
Hi there.
Thanks for providing this slider in the first place 🙌🏻.
But I have the following problem:
I have a slider with images with variable widths (when height is matched).
Lets imagine that the first image is about 70% width of the screen, and the second is just next to it.
So first I want to display the first image and 30% should already be filled by the second image.
If it slides 1 slide, I want it to stop as soon as the left edge of the second image is at the left edge of the slider wrapper.
I see that I can adjust the perPage
setting, but this would sometimes mess up my slides (I get empty slides at the end) or some images are never displayed. And most of all: so far all my slides have the same width...
Maybe you can give me a hint how to get this done.
cheers
I am probably doing something wrong - I am really new to the front-end world.
I am trying to display a div using v-if
. The ViewCarousel-Wrapper
class specifies overflow: hidden;
- which typically cuts off most of my popup.
Is there a recommended / suggested way to deal with this?
Thank you want to and I said as soon as possible
Thanks for the plugin!
Where can we change the CSS-Styles? I tried to set custom styles, but they doesn't work.
I must say, this is a very nice carousel.
It works absolutely great when I use in combination with Laravel and add slides server side using the Blade template engine. However, I want to add these slides dynamically using Vue.
When using a Vue component that encapsulates slides instead of actual slides, dynamic slides do not work. Even when slides are directly added without the encapsulating component, they don't work.
The problem is that the first page is initialized but navigation is impossible (nor with buttons nor using the autoplay function). The rendered HTML clearly shows that there are more slides than the first page is able to contain. The template I'm using is:
<template>
<div>
<carousel :pagination-enabled=true :navigation-enabled=true
:per-page=5 :scroll-per-page=true :click-target-size=20
:autoplay="true" :autoplay-timeout="5000">
<list-item v-for="item in items" :key="item['id']"></list-item>
</carousel>
</div>
</template>
The child component list-item has the following template:
<template>
<slide class="itemType">
<div @click="itemClick">
....
</div>
</slide>
</template>
So both contain nothing fancy.
I'm using version 0.6.4 of the carousel.
I am using code from your own example.
<carousel :perPage="1" paginationActiveColor="#42b983" paginationColor="#b2ebd1" paginationSize="5" easing="linear" speed="300">
I got to errors with paginationSize and speed!
I want remove just the navigation dots and use only the next and prev buttons.
Running:
node v6.8.1
npm v4.0.5
Setup a vue boilerplate with vue-cli:
npm install -g vue-cli
vue init webpack test
cd test
npm install
npm install -S @ssense/vue-carousel
Added to main.js:
import VueCarousel from '@ssense/vue-carousel'
Vue.use(VueCarousel)
However I always get this error when I run with npm run dev:
Uncaught SyntaxError: Unexpected token import
at Object. (app.js:642)
at webpack_require (app.js:556)
at fn (app.js:87)
at eval (eval at (app.js:660), :11:20)
at Object. (app.js:660)
at webpack_require (app.js:556)
at fn (app.js:87)
at Object. (app.js:587)
at webpack_require (app.js:556)
at app.js:579
(app.js:642)
eval("import Carousel from './Carousel.vue';\nimport Slide from './Slide.vue';\n\nconst install = (Vue) => {\n Vue.component('carousel', Carousel);\n Vue.component('slide', Slide);\n};\n\nexport default install;\n\nexport {\n Carousel,\n Slide,\n};\n\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9+L0Bzc2Vuc2UvdnVlLWNhcm91c2VsL3NyYy9pbmRleC5qcz8wNTY4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7O0FBRUE7O0FBRUE7QUFDQTtBQUNBO0FBQ0EiLCJmaWxlIjoiOS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBDYXJvdXNlbCBmcm9tICcuL0Nhcm91c2VsLnZ1ZSc7XG5pbXBvcnQgU2xpZGUgZnJvbSAnLi9TbGlkZS52dWUnO1xuXG5jb25zdCBpbnN0YWxsID0gKFZ1ZSkgPT4ge1xuICBWdWUuY29tcG9uZW50KCdjYXJvdXNlbCcsIENhcm91c2VsKTtcbiAgVnVlLmNvbXBvbmVudCgnc2xpZGUnLCBTbGlkZSk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBpbnN0YWxsO1xuXG5leHBvcnQge1xuICBDYXJvdXNlbCxcbiAgU2xpZGUsXG59O1xuXG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9+L0Bzc2Vuc2UvdnVlLWNhcm91c2VsL3NyYy9pbmRleC5qc1xuLy8gbW9kdWxlIGlkID0gOVxuLy8gbW9kdWxlIGNodW5rcyA9IDAiXSwic291cmNlUm9vdCI6IiJ9");
Any help would be appreciated :)
I'm not sure if any Modal-like functionality is planned for the future of this project, but thought I'd try and discuss here. Much of the time I use image carousel functionality, I also want to use the same carousel to prompt a modal, with content of the image, and anything else in the <slot>
. Not dissimilar to viewing a photo on Facebook.
The modal could be prompted by:
expand
icon, or similarIs this something that may be planned for a the project?
Are there specific avenues you'd like to take in order to implement something like this?
If it is planned, would a PR be welcomed?
Hi
Not sure I'm using the navigationNextLabel
correctly, but the code below, gives me an error:
Property or method "Next" is not defined on the instance but referenced during render.
<carousel :perPage="1" :navigationEnabled="false" :navigationNextLabel="Next">
<slide>
Slide 1 Content
</slide>
<slide>
Slide 2 Content
</slide>
</carousel>
I'd like to suggest to have an option to make the carousel auto-slide.
Something like this:
<carousel :options="{'auto-slide': true}">
<slide>...</slide>
<slide>...</slide>
One of the situations this package could use is for customer testimonials on the page.
It could be nice if the visitors have a peek on the few satisfaction feedback from our loyal customers.
I'm increasing horizontal margin on VueCarousel-slide
, but the carousel is being cut off.
I can set flex-basis
manually but it doesn't get updated with resolution changes.
<carousel :perPage="5" :navigationEnabled="true" :paginationEnabled="false">
<slide>
<img src="http://via.placeholder.com/300">
</slide>
<slide>
<img src="http://via.placeholder.com/300">
</slide>
<slide>
<img src="http://via.placeholder.com/300">
</slide>
<slide>
<img src="http://via.placeholder.com/300">
</slide>
<slide>
<img src="http://via.placeholder.com/300">
</slide>
<slide>
<img src="http://via.placeholder.com/300">
</slide>
<slide>
<img src="http://via.placeholder.com/300">
</slide>
<slide>
<img src="http://via.placeholder.com/300">
</slide>
</carousel>
</template>
<script>
import { Carousel, Slide } from 'vue-carousel';
export default {
components: {
Carousel,
Slide,
},
};
</script>
<style lang="scss">
$margin: .5%;
$padding: 1%;
.VueCarousel-inner {
/*flex-basis: 327px !important;*/
}
.VueCarousel-slide {
margin: 0 $margin 0 $margin;
padding: $padding $padding $padding $padding;
border: 2px solid #0e5a7e;
img {
width: 100%;
}
}
.VueCarousel-navigation-button {
color: inherit !important;
}
</style>
Hi, nice work on this Carousel. I really like it!
I was wondering, will you be adding more transition effects in the future, i.e. fade?
Thanks!
Please add a property for disable dragging function. Thanks
I can enable navigation. Adding :navigationEnabled="true"
to carousel doesn't effect anything.
Using with blank webpack starter.
just this simple example: i got four dots, it's ok if i use template
in Vue constructor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../dep/vue.js"></script>
<script src="../dep/vue-carousel.min.js"></script>
</head>
<body>
<div id="example">
<carousel :perPage="1">
<slide>1</slide>
<slide>2</slide>
<slide>3</slide>
</carousel>
</div>
<script>
new Vue({
el: '#example',
components: {
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
},
});
</script>
</body>
</html>
How can I change the prev/next buttons with a custom ones?
Great slider - thank you very much!
I was wondering if we could be allowed to set the first slide index? I would like to start my slider on the very last slide in the list. Or maybe there's already a way to do this that I have missed?
Thanks!
Is there a way to customize a color or position of navigation arrows?
There're a few component options regarding styles such as paginationActiveColor
, paginationPadding
, etc. Since they are rendered as inline styles, it is hard to override them with CSS classes. It's better to set CSS classed for these elements. What do you think?
Love this slider so far and it would be even better with an API option to auto cycle through the slides by specifying the interval per slide. An option to loop infinitely or not would be nice as well.
I'm trying to copy from one of the example fiddle, however I'm encountering an issue where the pagination and carousel showing extra blank page(s).
here's the fiddle
https://jsfiddle.net/irhamkim/dqwbjkre/1/
Hello ,
This parameter seems doesn't work :
:navigationNextLabel='test'
Any issue or I use it in the wrong way ? I also declare :navigationEnabled to True.
Thank you.
Hello,
First of all, thanks for this awesome component.
I have a carousel which contains a list of elements. This list is updated so sometimes, the number of items in the carousel changes.
Is there a way to trigger an update of the carousel ?
For example, now, if I switch from 1 item to 20 items, the pagination doesn't update and all the elements are on the same page.
I tried to call recomputeCarouselWidth
without success.
Thanks!
Foobar
How do i create a full screen image carousel?
Currently, camel case named event is not triggered in in-dom template.
Maybe we need to change the event name like page-change
or trigger both events.
Refer vuejs/vue#4044
from the doc
#speed
Size of each pagination dot. Pixel values are accepted.
Is it a speed or a size !?
I'm trying to recompile the library in order to change some functionality, and these are the commands I ran:
npm install
npm run build
But I get this message:
> [email protected] build ...\node_modules\vue-carousel
> webpack --config config/webpack.min.conf.js && npm run updateDocAssets
Hash: 418ca0cfdee1742e1365
Version: webpack 1.15.0
Time: 58ms
Asset Size Chunks Chunk Names
vue-carousel.min.js 2.12 kB 0 [emitted] main
+ 1 hidden modules
ERROR in vue-carousel.min.js from UglifyJs
SyntaxError: Unexpected token: name (Carousel) [vue-carousel.min.js:62,8]
It seems it doesn't compile .vue files. Is there a way to achieve that?
Thanks
Hello, it will be perfect to add some class to active element.
User will be able to easy customize it.
Hello
I tried this carousel and I think it´s great. It´s easy and nice to use.
But I wanted to use it with some form components and other elements different that only images. When I click on the inputs, they just lose focus immediately. I don´t want to think that this component is only mean to use for images. It could be good idea that any component could be used.
Well, if you have a solution for my situation, I would really thank you.
Again, nice component
First, good effort, we need a good vue carousel 👍
I've noticed an issue with the rendering when using an inline template... took me a while to work out what was happening.
I've made a copy of one of the example fiddles and replace the JS template with an inline template:
https://jsfiddle.net/doginthehat/h8uq5d0p/
The carousel works in that it's correctly laid out.
However, it seems to completely ignore any of the attributes passed to the tag.
So in this instance, the number of slides and the carousel isn't responsive. It just show 2 items no matter what you give it.
<carousel :perPage="4" :perPageCustom="[[480, 2], [768, 3]]">
Haven't been able to dig in the code to find the problem but you might have some idea.
Thanks
Hey there,
I encountered a bug and was only able to create a workaround as I am too inexperienced to fix it. It's about the following code in Carousel.vue:
breakpointSlidesPerPage() { if (!this.perPageCustom) { return this.perPage } const breakpointArray = this.perPageCustom const width = this.browserWidth const breakpoints = breakpointArray.sort((a, b) => ((a[0] > b[0]) ? -1 : 1)) // Reduce the breakpoints to entries where the width is in range // The breakpoint arrays are formatted as [widthToMatch, numberOfSlides] const matches = breakpoints.filter(breakpoint => width >= breakpoint[0]) // If there is a match, the result should return only // the slide count from the first matching breakpoint const match = matches[0] && matches[0][1] return match || this.perPage },
What's wrong is, that, if I define a carousel like such:
<carousel class="ProjectSlider" :perPageCustom="[[480, 1],[768, 2]]" :navigationEnabled="true">
For devices with width > 480, 1 slide will be shown, for width > 768, 2 slides will be shown and for < 480, match will be undefined (I debugged that) and if perPage is not defined, the view will be buggy. I just set perPage to 1 to circumvent that bug, but this behaviour is not the behaviour described in the documentation.
Please suggest how to use with Vue SSR.
I am trying to integrate this with VueJS's framework Nuxt.js
import Vue from 'vue'
if(process.BROWSER_BUILD) {
const VueCarousel = require('vue-carousel');
VueCarousel.default.install(Vue)
}
I am getting this
vue.runtime.common.js:521 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside
, or missing . Bailing hydration and performing full client-side render.
Although I am able to make it work in dev mode, regardless of the warning.
On production mode vue-carousel doesn't work and doesn't show images at all.
Please suggest.
Can we add a prop that make the navigation handles locate inside the carousel div?
It might be just add a prop that changes .VueCarousel-navigation-*
class left
or right
value.
Thanks
trying to style the 'carousel' and 'slide' custom elements that vue-carousel exposes but it does not seem to be working very well...dunno what I'm doing wrong here... I imported the component globally then added it to my app component, then in the styles section of the app component i added carousel and slide selectors and gave them bg colors to test, but the colors are not showing up at all...not sure what to do next at this point.
Please help, if possible, thank you :-)
Hi,
Can we have a setting to define direction to slide like horizontal as well as vertical?
Can we navigate the pages left and right by calling a simple function manually instead of using button clicks?
related: #25
I want to handle navigation from outside the Carousel. I am using Vuex, so it would be handy to have an event emitted when the currentPage changes. I could do it, add a watcher on currentPage that emits an event, and create a pull request, if you want.
I tried this, but it does not work, would be nice though:
watch: {
'$refs.carousel.currentPage' () {
if (this.currentPage !== this.$refs.carousel.currentPage) {
store.dispatch('carousel/currentPageChanged', this.$refs.carousel.currentPage)
}
}
}
The rest should work like this (did not test):
computed: {
...mapGetters('carousel', [
'currentPage'
])
},
watch: {
currentPage () {
if (this.currentPage !== this.$refs.carousel.currentPage) {
this.$refs.carousel.goToPage(this.currentPage)
}
}
}
Thank you!
Hi,
Using:
"vue": "^2.2.6",
"vue-carousel": "^0.6.4"
I made a made a basic "vue init webpack" app
did an npm install of the carousel lib
added the import and use code to src/main.js
and added the <carousel> and <slide>
elements in the index.html
and I just get the plain old text "Slide 1 Content Slide 2 Content" - no carousel features
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.