ludo237 / vuejs-carousel Goto Github PK

View Code? Open in Web Editor NEW

50.0 6.0 16.0 1.21 MB

Complete photo carousel build with VueJS and web standards in mind

Home Page: https://ludo237.github.io/vuejs-carousel/

License: MIT License

HTML 26.49% JavaScript 27.96% Vue 45.55%

carousel vuejs photos javascript vue vuejs-carousel vuejs2

vuejs-carousel's Introduction

Hi there 👋

I am Claudio Ludovico, entrepreneur, coder, investor and futurist.

📚 Being self-taught, I believe in life-long learning and knowledge sharing. I also deeply believe in the open-source movement and try to give back to the community whenever I can.

I am part of the ‘90s generation that grew up with the Fresh Prince of Bel Air and the Commodore 64. Understanding how stuff works is a passion that I showed since the age of 5, in fact I tried to assemble and disassemble both “Commodore” and “Amiga” with very positive results, but with a lot of anger as well. It was caused by the fact that the more parts I discovered, the more I could not understand how they worked.

When I grew up, lots of things became clearer and the field of computer science became my main passion. I started to get closer to the art of programming relatively late, around 16 years old, before, I dabbled only in programming micro C software on consoles, nothing important. The "hard" programming began exactly when I was 16. After that, I took a diploma in computer science in Italy then I started to study computer engineering in Switzerland at SUPSI where I learnt a lot of basic essential techniques for a good engineer. I'm deeply proud of my work and I strongly believe in continuous formation because technology never stops and I will not ever let it go too far from my passion.

My work 👨‍💻

Formerly the CTO of 6GO, which was one of my companies I'm currently seeking for new challenges and opportunities around the world. I'm also a retired investor now I'm a proudly Bitcoin only owner.

Sponsoriships

I love supporting people and ideas, if you are building something interesting please contact me and if your idea is good enough I'll sponsor you!

Get in touch ✉️

On LinkedIn

vuejs-carousel's People

Contributors

Stargazers

Watchers

Forkers

angelogulina leandrocanabarro fuser002 nc-rasel jzxyouok easymomo originalwebgurl tastyloper winsonsun h4rdkur michaeljanich jeremiah-rs mekatous chptr-app neeooh krchvova

vuejs-carousel's Issues

component lists rendered with v-for should have explicit keys

Hi Creator

Thanks for created such components and shared with us.

I tried to use the components but I got below error message, can you please help to check ? it seems the plugin is not working with latest version of VueJS yet.

./~~/vue-loader/lib/template-compiler?{"id":"data-v-fbf2b658","hasScoped":true}!./~~/vue-loader/lib/selector.js?type=template&index=0!.//vuejs-carousel/src/components/Comments.vue
(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
@ .//vuejs-carousel/src/components/Comments.vue 10:2-180
@ ./~~/babel-loader/lib!./~~/vue-loader/lib/selector.js?type=script&index=0!.//vuejs-carousel/src/components/Theater.vue
@ .//vuejs-carousel/src/components/Theater.vue
@ .//vuejs-carousel/src/carousel.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js
client:147:55
.//vue-loader/lib/template-compiler?{"id":"data-v-51a032e1","hasScoped":true}!./~~/vue-loader/lib/selector.js?type=template&index=0!./~~/vuejs-carousel/src/components/Photos.vue
(Emitted value instead of an instance of Error) : component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
@ .//vuejs-carousel/src/components/Photos.vue 10:2-178
@ .//vuejs-carousel/src/carousel.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

Thanks

Separate CSS from the component to an external file

Love the simplicity of single-file, but feel that the CSS should be separate SASS/SCSS file. Are you open to a PR?

Request: Previous and Next buttons

Request: Previous and Next buttons on the photo. I know the keys work.
But I still need buttons.

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

When importing, this error happened.

I added below to package.json for es6.
"devDependencies": { "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "babelify": "^7.3.0", "browserify": "^14.1.0", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-notify": "^3.0.0", "gulp-plumber": "^1.1.0", "gulp-sass": "^2.2.0", "gulp-sourcemaps": "^2.6.1", "node-sass-package-importer": "^5.0.0-alpha.14", "vinyl-source-stream": "^1.1.0", "vuetable-2": "^1.6.6", "vuex": "^2.4.1" }, "dependencies": { "babel-polyfill": "^6.26.0", "jsesc": "^2.5.1", "vue": "^2.4.4", "vue-sweetalert": "^0.1.18", "vueify": "^9.4.1", "vuejs-carousel": "^0.6.0", "webpack": "^2.7.0" }, "browserify": { "transform": [ "vueify", [ "babelify", { "presets": [ "es2015", "env" ] } ] ] },
The task of gulp is here.
browserify({ 'entries': ['./resource/assets/js/top.js'] }) .bundle() .pipe(plumber()) .on("error", function (err) { console.log("Error : " + err.message); }) .pipe(source('./resource/assets/dist/js/top.js')) .pipe(gulp.dest('./'));
At the last, my env is this.
node -v : v7.7.4
npm -v : 5.4.0

Best regards.

Clean up the code of the component

The current code is a bit of spaghetti and a mess of logic, I've already a cleaner solution for that but anyone feel free to submit pull request with their way of improvements.

Some problems:

Computed properties have repeated code inside
Methods have repeated code inside
Some conditional rendering use a wrong Boolean logic

Add an example to the project

This is not a priority but it will be implemented soon^TM the idea is to offer a remote place where you can see the live example of the latest version of vuejs-carousel

Pagination

I want to use this utility to list all my photos which are more than 10000 in number. How to i add pagination

Improve the example

The current example is really ugly and there's a lot of room for improvements. Here's a list of things that should be done:

Add a better graphics for the thumbnail
Add a little bit of text to explain whats is going on
Use different size for the images in order to demonstrate how well the theater works with all kind of images

The engine "node" is incompatible with this module.

When use yarn to install it shows this error:
error [email protected]: The engine "node" is incompatible with this module. Expected version "7.2.0".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

Advise to change engine version to something like ">=6.9.0" in your package.json to allow install with yarn. You are currently lock down with 7.2