ember-swiper / ember-cli-swiper Goto Github PK

View Code? Open in Web Editor NEW

71.0 4.0 76.0 2.41 MB

Swiper-Wrapper for ember

Home Page: https://ember-swiper.github.io/ember-cli-swiper/

License: MIT License

JavaScript 68.21% HTML 4.13% CSS 2.59% Handlebars 25.07%

ember emberjs swipe

ember-cli-swiper's Introduction

Archived: Not adviced to use anymore

This repository wasn't actively maintained for quite a while now. Thus the original author of it decided to set it to read-only.

Ember-cli-swiper

Simple ember-wrapper around Swiper by idangerous.

See the demo for examples and usage-infos.

Installation

ember install ember-cli-swiper

Usage

{{#swiper-container}}
  {{#swiper-slide}}Slide 1{{/swiper-slide}}
  {{#swiper-slide}}Slide 2{{/swiper-slide}}
  {{#swiper-slide}}Slide 3{{/swiper-slide}}
  {{#swiper-slide}}Slide 4{{/swiper-slide}}
  {{#swiper-slide}}Slide 5{{/swiper-slide}}
{{/swiper-container}}

Options

All available Swiper options are supported and can be configured two ways:

As top level attributes:

{{swiper-container freeMode=true}}

As a hash of options:

// In controller
Controller.extend({
  myOptions: { parallax: true }
});

{{swiper-container options=myOptions}}

Events

All Swiper events are configured as an events action map like so:

{{swiper-container events=(hash click=(action "myClickHandler"))}}

Please note that attribute values will overwrite any conflicting options.

Running tests

ember test

ember-cli-swiper's People

Contributors

Stargazers

Watchers

ember-cli-swiper's Issues

Mousewheel Control

Hi,

Is mousewheel control supported at all? Swiper supports it and it looks like it should be as easy as just passing an option. I'm willing to open a PR if you think adding support for it will be simple.

Thanks!

Migrate addon to [email protected] and lockdown dependencies with yarn

Uncaught TypeError: Cannot read property 'breakpoints' of undefined

Hi,

I am encountering an error when trying to use the updateFor attribute.

swiper.js:3810 Uncaught TypeError: Cannot read property 'breakpoints' of undefined
    at Class.update$$1 (swiper.js:3810)
    at invoke (backburner.js:258)
    at Queue.flush (backburner.js:151)
    at DeferredActionQueues.flush (backburner.js:329)
    at Backburner.end (backburner.js:462)
    at Backburner._boundAutorunEnd (backburner.js:424)

I used the Javascript debugger and figured out that it's calling .update() on the swiper-container component instance and not the Swiper instance.

Looking at the code, it looks strange that that's happening because the code looks correct. But I think it has to do with the this bindings in the runloop callback.

I'm having trouble setting up the development environment for my fork of ember-cli-swiper so I'm going to implement my app's workaround for updateFor by subclassing the component for now, but I'd love to work on a proper PR as well.

I did some tinkering with the component instance and Swiper instance in the console, to reproduce, and it seems like it would work if I change:

      once(this, this.get('_swiper').update);

to:

      once(this, function() { this.get('_swiper').update(); });

Unexpected token error while installing the ad-on

I was trying to install this ad-on and came across this error(tested with Ember versions 2.9.0-beta.2 and 2.10.0-beta.2) .

$ ember install ember-cli-swiper
MyProject/node_modules/ember-cli-swiper/index.js:7
  included(app) {
          ^
Unexpected token (
MyProject/node_modules/ember-cli-swiper/index.js:7
  included(app) {
          ^
`SyntaxError:` Unexpected token (
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Function.Addon.lookup (MyProject/node_modules/ember-cli/lib/models/addon.js:998:19)
    at MyProjects/node_module/ember-cli/lib/models/addons-factory.js:48:38
    at visit (MyProject/node_modules/ember-cli/lib/utilities/DAG.js:23:3)

Something is up with the new version and Centered Slides

See the example "Centered Slides + Pagination + Cursor" on http://ember-swiper.github.io/ember-cli-swiper/

The slides are pushed to the right quite a few.

I was able to take any resemblance of centered or centeredSlides off and it seems to be ok.

Thanks

Sourcemap not found with production build when sourcemaps are enabled

Currently, the swiper.min.js file references the map file in dist/js/maps directory. As a result, the production build is broken if you enable sourcemaps because it can't be found.

I attempted a few fixes with the treeForPublic hook that did end up resolving the immediate issue, but it resulted in the final sourcemap ONLY including the swiper map and nothing else.

Here's where I settled as a temporary fix: mazondo@88f87cf

Mostly an information issue for anyone else who hits this, but I'd also looooove to get any input on potential real fixes.

currentSlide property not working until given a manually-done page resize

Is there some additional setup require for it?

It doesn't work for the initial setup (i.e. {{#swiper-container currentSlide=currentSlide}}) or updates (i.e. this.set('currentSlide', 2))

Index.js needs to be updated to prevent 'app.import is not a function'

You can read full details of this problem here (ember-cli/ember-cli#5747) but it basically shows up when ember-cli-swiper is installed into an addon that is then hosted in an app. There can be multiple levels of this. The above issues references a fix that I think will take care of this for swiper (jamesleebaker/ember-truncate@42d58a1):

var current = this;
// If the addon has the _findHost() method (in ember-cli >= 2.7.0), we'll just
// use that.
if (typeof this._findHost === 'function') {
  app = this._findHost();
}
// Otherwise, we'll use this implementation borrowed from the _findHost()
// method in ember-cli.
// Keep iterating upward until we don't have a grandparent.
// Has to do this grandparent check because at some point we hit the project.
do {
  app = current.app || app;
} while (current.parent.parent && (current = current.parent));

Cannot install addon with npm

Hi,

I couldn't install the addon directly through npm.

Here's the error message:

$ ember install ember-cli-swiper
version: 2.4.2
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/user-guide/#watchman for more info.
Installed packages for tooling via npm.
/Users/mikzar/development/ember-project/node_modules/ember-cli-swiper/blueprints/ember-cli-swiper/index.js:4
  normalizeEntityName() {
                     ^
Unexpected token (
/Users/mikzar/development/ember-project/node_modules/ember-cli-swiper/blueprints/ember-cli-swiper/index.js:4
  normalizeEntityName() {
                     ^
SyntaxError: Unexpected token (
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Function.Blueprint.load (/Users/mikzar/development/ember-project/node_modules/ember-cli/lib/models/blueprint.js:1358:25)
    at Function.Blueprint.lookup (/Users/mikzar/development/ember-project/node_modules/ember-cli/lib/models/blueprint.js:1333:24)
    at Class.module.exports.Task.extend.lookupBlueprint (/Users/mikzar/development/ember-project/node_modules/ember-cli/lib/tasks/generate-from-blueprint.js:91:22)

It seems like I managed to use the addon anyway by installing the module locally ($ npm install node_modules/ember-cli-swiper/), but then I had another error when starting the server:

 ember s -pr http://localhost:3000
/Users/mikzar/development/ember-project/node_modules/ember-cli-swiper/index.js:7
  included(app) {
          ^
Unexpected token (
/Users/mikzar/development/ember-project/node_modules/ember-cli-swiper/index.js:7
  included(app) {
          ^
SyntaxError: Unexpected token (
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Function.Addon.lookup (/Users/mikzar/development/ember-project/node_modules/ember-cli/lib/models/addon.js:859:19)
    at /Users/mikzar/development/ember-project/node_modules/ember-cli/lib/models/addons-factory.js:47:36
    at visit (/Users/mikzar/development/ember-project/node_modules/ember-cli/lib/utilities/DAG.js:23:3)

In node_modules/ember-cli-swiper/index.js, I changed the line

included(app) {
  ...
}

included: function(app) {
  ...
}

and it finally worked.

Could take a look at this ?

Best

Using Ember Data for slides

I am trying to use ember-cli-swiper with Data, when I make my swiper component, I am doing this:

{{#swiper-container spaceBetween=30 loop=true freeMode=true slidesPerView=4}}
  {{#each categories as |category|}}
    {{#swiper-slide }}{{category.title}}{{/swiper-slide}}
  {{/each}}
 {{/swiper-container}}

what happens is that the data does load items, but when it loops, it does not show data items anymore. When I write the component without the #each, and just hard code items, it works fine. Any suggestions?

Glitch Issue

I love this package very much, but just wondering about glitch issue on mobile.
I have inserted the slider section into iFrame tag for my needs. but there is a glitch on mobile. All slider images are flickering. could you please help me for this case? For more details, you can check this URL on mobile.
Thanks

Receiving deprecation warning when using registerAs param

just formalizing an issue brought forward by @abercrave (PR #21)

this warning is caused by these lines
problem is resolved by: PR #23

Demo page resizes while swiping on iOS Chrome

Trying out the demos on iOS Chrome causes the page to reflow.

How to use swiper slider methods?

How can we use swiper slider methods http://idangero.us/swiper/api/#methods with ember-cli-swiper ?

build error on ember 2.16

When doing a production build, i get the following build error

Build failed.
The Broccoli Plugin: [Fingerprint] failed with:
Error: ENOENT: no such file or directory, open '/Users/ron/cinch/advisor/tmp/uglify_writer-input_base_path-kCMItc3z.tmp/assets/maps/swiper.min.js.map'
    at Error (native)
    at Object.fs.openSync (fs.js:641:18)
    at Object.fs.readFileSync (fs.js:509:33)
    at UglifyWriter.processFile (/Users/ron/cinch/advisor/node_modules/broccoli-uglify-sourcemap/index.js:101:41)
    at /Users/ron/cinch/advisor/node_modules/broccoli-uglify-sourcemap/index.js:65:16
    at Array.forEach (native)
    at /Users/ron/cinch/advisor/node_modules/broccoli-uglify-sourcemap/index.js:55:25
    at Array.forEach (native)
    at UglifyWriter.build (/Users/ron/cinch/advisor/node_modules/broccoli-uglify-sourcemap/index.js:54:19)
    at /Users/ron/cinch/advisor/node_modules/broccoli-plugin/read_compat.js:93:34

The broccoli plugin was instantiated at:
    at Fingerprint.Plugin (/Users/ron/cinch/advisor/node_modules/broccoli-plugin/index.js:7:31)
    at Fingerprint.Filter [as constructor] (/Users/ron/cinch/advisor/node_modules/broccoli-filter/index.js:34:10)
    at new Fingerprint (/Users/ron/cinch/advisor/node_modules/broccoli-asset-rev/lib/fingerprint.js:21:10)
    at Fingerprint (/Users/ron/cinch/advisor/node_modules/broccoli-asset-rev/lib/fingerprint.js:16:12)
    at new AssetRev (/Users/ron/cinch/advisor/node_modules/broccoli-asset-rev/lib/asset-rev.js:31:25)
    at AssetRev (/Users/ron/cinch/advisor/node_modules/broccoli-asset-rev/lib/asset-rev.js:7:12)
    at Class.postprocessTree (/Users/ron/cinch/advisor/node_modules/broccoli-asset-rev/index.js:31:40)
    at projectOrAddon.addons.reduce (/Users/ron/cinch/advisor/node_modules/ember-cli/lib/utilities/addon-process-tree.js:6:25)
    at Array.reduce (native)
    at addonProcessTree (/Users/ron/cinch/advisor/node_modules/ember-cli/lib/utilities/addon-process-tree.js:4:32)

ember version

ember-cli: 2.16.2
node: 6.11.2
os: darwin x64

package.json

"devDependencies": {
    "bower": "^1.8.0",
    "broccoli-asset-rev": "^2.6.0",
    "broccoli-clean-css": "^2.0.1",
    "broccoli-funnel": "^2.0.1",
    "broccoli-merge-trees": "^2.0.0",
    "cordova": "^7.0.1",
    "cordova-plugin-crosswalk-webview": "^2.3.0",
    "dotenv": "^4.0.0",
    "ember-ajax": "^3.0.0",
    "ember-auto-focus": "^2.0.1",
    "ember-changeset": "^1.3.0",
    "ember-changeset-validations": "^1.2.8",
    "ember-cli": "~2.16.2",
    "ember-cli-accounting": "^2.0.1",
    "ember-cli-app-version": "^3.0.0",
    "ember-cli-babel": "^6.7.2",
    "ember-cli-content-security-policy": "^1.0.0",
    "ember-cli-dependency-checker": "^2.0.1",
    "ember-cli-deploy": "^1.0.1",
    "ember-cli-deploy-aws-pack": "^1.0.0",
    "ember-cli-deploy-build": "^1.1.0",
    "ember-cli-deploy-display-revisions": "^1.0.0",
    "ember-cli-deploy-revision-data": "^1.0.0",
    "ember-cli-deploy-s3-index": "^1.0.0",
    "ember-cli-document-title": "^0.3.3",
    "ember-cli-eslint": "^4.2.0",
    "ember-cli-foundation-6-sass": "^0.0.24",
    "ember-cli-htmlbars": "^2.0.3",
    "ember-cli-htmlbars-inline-precompile": "^1.0.2",
    "ember-cli-inject-live-reload": "^1.7.0",
    "ember-cli-json-pretty": "^0.1.2",
    "ember-cli-moment-shim": "^3.4.0",
    "ember-cli-qunit": "^4.0.0",
    "ember-cli-sass": "^7.0.0",
    "ember-cli-shims": "^1.1.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-stylelint": "^1.0.0",
    "ember-cli-swiper": "^0.6.0",
    "ember-cli-uglify": "^2.0.0",
    "ember-cli-update": "^0.9.1",
    "ember-cli-uuid": "^0.4.1",
    "ember-concurrency": "^0.8.7",
    "ember-cordova": "^1.0.3",
    "ember-cordova-platform": "^0.1.0",
    "ember-cordova-splash": "^0.1.4",
    "ember-cp-validations": "^3.4.0",
    "ember-data": "~2.16.2",
    "ember-elsewhere": "^1.0.2",
    "ember-export-application-global": "^2.0.0",
    "ember-font-awesome": "^3.0.5",
    "ember-freestyle": "^0.6.1",
    "ember-gestures": "^0.4.5",
    "ember-hammertime": "^1.2.3",
    "ember-hook": "^1.4.2",
    "ember-i18n": "^5.0.2",
    "ember-inputmask": "^0.4.0-beta.4",
    "ember-load-initializers": "^1.0.0",
    "ember-metrics": "^0.12.1",
    "ember-moment": "^7.4.1",
    "ember-new-relic": "^0.5.2",
    "ember-phoenix-shim": "^0.1.0",
    "ember-power-select": "^1.9.6",
    "ember-radio-button": "^1.1.1",
    "ember-resolver": "^4.3.0",
    "ember-route-action-helper": "^2.0.5",
    "ember-simple-auth": "^1.4.0",
    "ember-source": "~2.16.2",
    "ember-svg-jar": "^0.11.1",
    "ember-truth-helpers": "^1.3.0",
    "ember-user-activity": "^0.9.0",
    "liquid-fire": "^0.27.3",
    "loader.js": "^4.2.3",
    "phoenix": "^1.2.1",
    "stylelint-config-standard": "^17.0.0"
  },

Can't use hashed options from component?

Hi, I have a component which uses swiper in it's template, however, it seems that swiper using the hashed options from the component.js file?

my-component.js:

import Component from '@ember/component';

export default Component.extend({
    options: {
        grabCursor: true,
        pagination: {
            el: '.c-card-grid__pagination',
            clickable: true
        },
        mousewheel: {
            forceToAxis: true
        },
        centered: true,
        slidesPerView: "auto",
        spaceBetween: 25,
        class: "c-card-grid",
        slideActiveClass: 'c-card-grid__card--active',
        slideToClickedSlide: true
    }
});

my-component.hbs:

    {{#swiper-container options=options }}
        {{#each cards as |card|}}
            {{#swiper-slide class="c-card-grid__card"}}
                {{card card=card}}
            {{/swiper-slide}}
        {{/each}}

        <nav class="c-card-grid__pagination"></nav>
    {{/swiper-container}}

more maintainers needed 👀

Hi,

unfortunally my job/daily work as shifted in an unpredicted way over the last few months.

In the past I was able to maintain this package partly in my spare time and partly in a work-related manner.

As I am currently not working with ember anymore, it's hard for me to keep track / review PRs.

Because of that I am looking for people who would like to be core-contributors of this project.

You will get rights to:

review and merge PRs
make new releases on npm

You need to:

be on track with current developments in EmberJS
ideally using this plugin actively by yourself

Cut a release

@Suven, Mate thanks to managing this project I know it takes time. So a huge thank you is in order!

Would you mind cutting a npm release?

Cheers
Dave
A kiwi up over

Fix breaking changes in FastBoot 1.0

The current ember-cli-fastboot releases (1.0.0-rc.1 and above) introduce breaking changes. These will most likely break your current FastBoot implementation.

See ember-fastboot/ember-cli-fastboot#387 for more information and a guide on how to fix your addon. Also you may want to visit the -fastboot Slack channel to get help from other users.

Note: this issue has been created automatically, by searching for certain patterns in your code. If you think this has been falsely created, feel free to close!

Build Error Ember 2.12.3

Adding ember-cli-swiper within an addon instead of an app we are receiving a build error - Cannot read 'import' of undefined located in ember-cli-swiper index.js on line 38.

It doesnt built on Heroku

Hi,

I get an error on trying to build in Heroku.

The Broccoli Plugin: [SourceMapConcat: Concat: Vendor /assets/vendor.js] failed with: remote: Error: ENOENT: no such file or directory, stat '/tmp/build_d223cc590d78a2f9524768ebd2ae23c0/tmp/source_map_concat-input_base_path-210kWlXo.tmp/0/bower_components/Swiper/dist/js/swiper.js'

I tried it with Ember Cli 2.3, and 2.4 and both fails. Using Ember 2.3.*

Best,
Ivan

Add classes attributes to set button and pagination color using Swiper css

Adding attributes 'paginationCls' and 'navigationCls' would allow us to use Swiper css classes ('.swiper-pagination-white' and '.swiper-button-white') to set pagination/button colors.

See how swiper use them in its demo: https://github.com/nolimits4web/Swiper/blob/master/demos/16-effect-fade.html#L46

See: benjaminlong@852722c

Following an exemple to create a swiper-container with white pagination/buttons:

{{#swiper-container
    paginationCls='swiper-pagination-white'
    pagination=true
    paginationClickable=true
    navigation=true
    navigationCls='swiper-button-white' }}
...
{{/swiper-container}}

I haven't been able to run ember test though. But it works as expected.

speed parameter should be adjustable

We need to adjust the speed (duration of the transitions between the slides) in our ember project. I know that you can set this parameter via the idangerous swiper API but I could not find this option in this project.

Can you add the speed parameter for the transitions beteween the slides? :)
Thx

Properties on slider container not updating when computed property changes

I'm trying to enable/disable swiping & clicking next/prev using computed properties but it does not work. Setting the appropriate properties to booleans works but they cannot be changed.

For example, this correctly disables swiping and clicking next/prev:

{{#swiper-container
  noSwiping=true
  noSwipingClass='swiper-slide'
  allowSwipeToPrev=false
  allowSwipeToNext=false
}}

Unfortunately, this does not allow you to enable swiping and clicking next/prev. Ideally, you could use a computed property to enable/disable like this:

component:

swipingEnabled: true,
swipingDisabled: Ember.computed.not('swipingEnabled')

template:

{{#swiper-container
  noSwiping=swipingDisabled
  noSwipingClass='swiper-slide'
  allowSwipeToPrev=swipingEnabled
  allowSwipeToNext=swipingEnabled
}}

Unfortunately, this does not work. Only the initial value of swipingEnabled or swipingDisabled is respected. If you toggle swipingEnabled, it does not toggle the functionality.

I've also tried the following:

{{#swiper-container
  noSwiping=swipingDisabled
  noSwipingClass='swiper-slide'
  allowSwipeToPrev=swipingEnabled
  allowSwipeToNext=swipingEnabled
  updateFor=swipingEnabled
  registerAs=superDuperSwiper
}}

toggleSliderEnabled() {
  this.toggleProperty('swipingEnabled');
  this.get('superDuperSwiper').forceUpdate();
}

[FR] Add support for autoplay

fails to install while bower tries to get the package. I can install bower package manually. Also the autoplay option doesn't work.

Pagination & navigation in v0.7.0

The swiper-container.hbs only en-/disables pagination and navigation if the two properties are defined as attributes when inserting the component.

Controller.extend({
  galleryOptions: { navigation: true, pagination: true }
});

{{#swiper-container
  options=galleryOptions
  navigation=true
  pagination=true
}}
  This works
{{/swiper-container}}

{{#swiper-container
  options=galleryOptions
}}
  This doesn't work (pagination/navigation are not displayed, because they are set in options.x)
{{/swiper-container}}

Fastboot Issue

I've pull the latest release and I have issues with Fastboot. The following error appears.

TypeError: Cannot read property 'userAgent' of undefined
   at /Users/ivanhueso/Documents/Panda/panda-bao-bao/tmp/broccoli_merge_trees-output_path-8TjGpyul.tmp/assets/swiper.js:4497:29
   at /Users/ivanhueso/Documents/Panda/panda-bao-bao/tmp/broccoli_merge_trees-output_path-8TjGpyul.tmp/assets/swiper.js:4498:102
   at /Users/ivanhueso/Documents/Panda/panda-bao-bao/tmp/broccoli_merge_trees-output_path-8TjGpyul.tmp/assets/swiper.js:5337:21
   at ContextifyScript.Script.runInContext (vm.js:35:29)
   at VMSandbox.eval (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/fastboot/src/vm-sandbox.js:14:16)
   at /Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/fastboot/src/ember-app.js:136:15
   at Array.forEach (native)
   at EmberApp.loadAppFiles (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/fastboot/src/ember-app.js:133:21)
   at EmberApp.retrieveSandboxedApp (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/fastboot/src/ember-app.js:181:10)
   at new EmberApp (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/fastboot/src/ember-app.js:49:21)
   at FastBoot._buildEmberApp (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/fastboot/src/index.js:114:17)
   at new FastBoot (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/fastboot/src/index.js:52:10)
   at app.use (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/ember-cli-fastboot/index.js:247:29)
   at Layer.handle [as handle_request] (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/express/lib/router/layer.js:95:5)
   at trim_prefix (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/express/lib/router/index.js:317:13)
   at /Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/express/lib/router/index.js:284:7
   at Function.process_params (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/express/lib/router/index.js:335:12)
   at next (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/express/lib/router/index.js:275:10)
   at err (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/ember-cli/lib/tasks/server/middleware/broccoli-watcher/index.js:54:11)
   at watcher.then (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/broccoli-middleware/lib/watcher-middleware.js:35:7)
   at tryCatch (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/rsvp/dist/lib/rsvp/-internal.js:198:12)
   at invokeCallback (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/rsvp/dist/lib/rsvp/-internal.js:211:13)
   at /Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/rsvp/dist/lib/rsvp/then.js:26:14
   at flush (/Users/ivanhueso/Documents/Panda/panda-bao-bao/node_modules/rsvp/dist/lib/rsvp/asap.js:80:5)
   at _combinedTickCallback (internal/process/next_tick.js:73:7)
   at process._tickCallback (internal/process/next_tick.js:104:9)`

What can I do?

Is possible to change slides width?

Hi! I am working with this awesome plugin :D (thanks for releasing it) and I am facing some issues.

I need to change the width of the slides to provide a bigger label without making it extremely height. I see widths are assigned directly in DOM so I guess this is part of the configuration of the plugin. There is a way to customize it for the current swiper configuration I am using:

{{#swiper-container grabCursor=true
		pagination=true
		centered=true
		slidesPerView=2
		spaceBetween=5}}
	<!-- (!) TODO: When data is defined add foreach -->
	{{#swiper-slide}}{{doctor-recommendation-card}}{{/swiper-slide}}
	{{#swiper-slide}}{{doctor-recommendation-card}}{{/swiper-slide}}
{{/swiper-container}}

I tried to change it directly in the CSS but sadly when doing it things get bit crazy and slides are not centered properly. Also tried to use the forceUpdate with no results (it just switch to current slide for what I see in your code).

Any way to customize slide width?

Thanks for your help!

Setting Swiper Loop Option to True Error

When add the option loop=true to a custom Swiper, I get the error:

Uncaught TypeError: Cannot read property 'classList' of undefined
at swiper.js line 206

To reproduce the error first configure a working Swiper like so:

{{#swiper-container
  currentSlide=1
  grabCursor=true
  loopedSlides=3
  pagination=true
  autoplay=(hash delay=9600)}}
  {{swiper-slide}}
  {{swiper-slide}}
  {{swiper-slide}}  
{{/swiper-container}}

then to generate the above error add the option loop=true to the swiper-container.

I expect the Swiper instance to work as it did before, only to automatically loop through all my slides 3 times.

Migrate Swiper to v4

Update README.md doc to undo #78

Navigation buttons broke in v1.0.0

Steps to reproduce:

ember-cli: 3.1.3
node: 9.11.1
os: darwin x64

ember new swiper-test & cd swiper-test

ember install ember-cli-swiper

Replace application.hbs with:

{{#swiper-container navigation=true}}
  {{#swiper-slide}}Slide 1{{/swiper-slide}}
  {{#swiper-slide}}Slide 2{{/swiper-slide}}
  {{#swiper-slide}}Slide 3{{/swiper-slide}}
  {{#swiper-slide}}Slide 4{{/swiper-slide}}
  {{#swiper-slide}}Slide 5{{/swiper-slide}}
{{/swiper-container}}

ember s

How it works

Downgrade to "ember-cli-swiper": "0.7.4",
yarn
ember s

Help with "Triggering an update"

I am constantly updating the swiper with new data, and having redraw issues, so I am trying to use the "Triggering an update" watching the property. This is not working, and wanted some assistance.

My swiper gets the data filtered on a route controller, which is passed via the component.

//swiper-component.hbs

 {{#swiper-container class="item-carousel" loop=true centered=true slidesPerView=4 registerAs=itemSwiper updateFor=categoryItems}}
    {{#each categoryItems as |item|}}
    {{#swiper-slide}}
        <div class="item-cell item d-flex justify-content-center align-items-center text-center" onclick={{action onSelect item}}>
          {{item.title}}
        </div>   
      {{/swiper-slide}}
    {{/each}}
  {{/swiper-container}}

The swiper does not redraw when the data changes. Any assistance would be great. Thanks

ember install ember-cli-swiper -> Unexpected token '(' at index.js:7

Hello everyone.

When installing your addon, I received this error:

$ ember install ember-cli-swiper
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Installed packages for tooling via npm.
/.../node_modules/ember-cli-swiper/index.js:7
  included(app) {
          ^
Unexpected token (
/.../node_modules/ember-cli-swiper/index.js:7
  included(app) {
          ^
SyntaxError: Unexpected token (
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Function.Addon.lookup (/.../node_modules/ember-cli/lib/models/addon.js:873:19)
    at /.../node_modules/ember-cli/lib/models/addons-factory.js:47:36
    at visit (/.../node_modules/ember-cli/lib/utilities/DAG.js:23:3)

I'm currently using node v3.5.2 and ember v2.5 (Not sure it's related)
Regarding this issue, I made a simple modification.

See here: benjaminlong@7251b30

Let me know if you think a pull-request is needed.
All the best!
Love your addon so far.

Consider using swipers realIndex

After merging #37 and having swiper 3.4 in place, we might consider using swipers realIndex.

As from their release-notes:

New swiper.realIndex property in addition to swiper.activeIndex that returns index of active slide considering loop

Before this was available I used to calculate the realIndex on my own. Maybe we can avoid doing the work twice with that.

Auto sliding support?

Is there support for auto sliding? should be easy to implement with ember-concurrency

speed options seem not working, even on the demo

Please help to fix this. Thanks.

issue installing ember-cli-swiper

Hi!
I'm trying to install the package, but I'm getting the following error:
After typing 'ember install ember-cli-swiper':

Error: Package Swiper not found

Thanks!

Disable touch/mouse drag swiping

Hello and thanks for this cool ember add on!
Is it currently possible to get the swiping effect disabled?
My intention is to have the slide action be triggered only by click/tap on the next button.
Pretty much like the noSwiping option says in the swiper API
Thank you in advance.

DEPRECATION: Overriding init without calling this._super is deprecated. Please call `this._super.init && this._super.init.apply(this, arguments);` addon: `ember-cli-htmlbars`

I'm having the following deprecation warning when running my app. That's caused by an old version of ember-cli-htmlbars which is what ember-cli-swiper is using ([email protected]).

I discovered this issue here: ember-cli/ember-cli-htmlbars#77

Is there a chance we could update ember-cli-htmlbars dependencies?

Version 0.7.0 is not on npm

When installing by ember install or npm install version 0.6.4 is the newest available from npm unlike the latest GitHub release, which is 0.7.0.

Add missing documentation for #9

Thanks to @Ledes for the first merged PR (:

The new options still need to be documented.

Set wrapper class without extending the addon?

Is it possible to set the wrapper class without having to extend the addon?

Migrate Ember-cli v3.1.2

use npm package

Did you considered switching from npm to bower for swiper dependency? Swiper is also published on npm.

does not update on adding or removing slides

If you add or remove slides, swiper shows some issues. If more slides are removed than added, you end up with an empty slide. If more slides are added than removed, the last one is not accessible. You find an ember-twiddle demonstrating the issue here: https://ember-twiddle.com/dcc18bd7d53c6979320b991db79d1bca?fileTreeShown=false&numColumns=0

Github.io website not working

Can't load assets from: http://suven.github.io/ember-cli-swiper/

Fails on Chrome 55 @ android 5.1

It is fail to work on mobile. I can't even get it to display.
Also chrome-dev-console on mobile mode dosen't work either.

Routable slide

Is there a way I can make each slide linkable via a route ?

For example:
Slide 1 -> /items/1
Slide 2 -> /items/2
Slide 3 -> /items/3

So that If I share this link with someone, the user would open the slider in the correct slide...

Parameter mapping table

I think it would be cool to maintain a whole table of Swiper params, including the following information:

What the default value is in Swiper (maybe not necessary)
What type of param it is (Swiper has some predetermined types)
Whether it's supported in ember-swiper or not
Whether there are any mistmatches between ember-swiper and Swiper (such as a renaming of a parameter)
Any info required to make it a two-way binding that works even after initialization

Swiper has a ton of parameters and I think if we make a table like this, there is a lot of power that will come from it. We can:

Make all supported options two-way bindings
Make option bindings show the correct default value even if it was initialized by Swiper and not ember-swiper
Show in the demo page a table of which options are supported and which ones aren't
Refactor the demo page to make a "demo builder" - just choose which options to use in your slider, and handlebars will render a demo slider plus the code it takes to build it!

Thoughts?

App.import is not a function. Including ember-cli-swiper in an addon dependecy

After creating an addon and including ember-cli-swiper as one of the dependencies I'm getting the following error when I run "ember server" or "ember test"

app.import is not a function TypeError: app.import is not a function

Similar issue and possible solution
ember-cli/ember-cli#3718
https://github.com/tomdale/ember-network/pull/7/files