Webpack support

[dmytro-y-dev]

First of all, thanks for great effort on making this library!

I tried a dozen of different carousel plugins and this one looks and performs the best (https://arcanecoast.ru/experiment/index.html, no performance optimization at the moment, just early prototype). So, I played a bit around with it and would like to integrate it into my current project.

However, this plugin is implemented in a way that is incompatible with Webpack. I tried connecting it with jcarouselSwing plugin in the project, spent 3 hours and failed :( The best solution that I see is to upgrade it to a state that is compatible with Webpack (and it shouldn't be that hard).

Is there any plan to improve compatibility of this plugin? M.b. somebody tried already and knows a way how to use it properly with Webpack?

[dmytro-y-dev]

Hackerish hacks, lazily made it work by using script-loader

import "jquery";
import "script-loader!jcarousel";
import "script-loader!jcarouselSwipe";

// ... do as usual, $('#some').jCarousel

[jsor]

You can use the ProvidePlugin.

[dmytro-y-dev]

@jsor jcarouselSwipe isn't being imported properly when I use ProvidePlugin. M.b. I am using wrong configuration values. Could you provide sample of webpack config with jcarousel+jcarouselSwipe and ProvidePlugin?

[dmytro-y-dev]

Sorry, looks like some kind of black magic happened to my PC 2 days ago, and everything was failing. I retried my project with

webpack config

.webpackConfig({
    resolve: {
        alias: {
            jquery: "jquery/dist/jquery",
            jcarousel: "jcarousel/dist/jquery.jcarousel",
            jcarouselSwipe: "jcarouselSwipe/dist/jquery.jcarousel-swipe",
        }
    },
    plugins: [
      new ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  })

and module

import "jcarousel";
import "jcarouselSwipe";

$(function() {
    var carousel = $('.jcarousel');

    carousel.jcarousel({
        'wrap': 'circular'
    });
  //...
});

and now everything plays nicely. Hmm.