javascript - swiper slider not work when i user webpack and import this in app js

i use swiper slider for sliders in my website when i use webpack and create app js for entry webpack No longer can read swiper.js my config webpack

const webpack = require('webpack');
module.exports = {
mode:"development",
context: __dirname,
entry: {
    vendor: [
        './node_modules/jquery/dist/jquery.js',
    ],
    shopApps: "./apps/shop/shopApp.js",

},
module: {
    rules: [
        {
            test : /\.jsx?$/,
            loader: 'babel-loader',
            // exclude: ['/node_modules/','/assets/sass','/assets/plugins/'],

        },
        {
            test: /\.(html)$/,
            loader: 'html-loader',
            exclude: '/node_modules/'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
            exclude: ['/node_modules/',__dirname+'/assets/plugins/'],
        },
        {
            test: /jquery.+\.js$/,
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            },{
                loader: 'expose-loader',
                options: '$'
            }]
        },
        {
            test: /\.(scss)$/,
            use: [
                {
                    // Adds CSS to the DOM by injecting a `<style>` tag
                    loader: 'style-loader'
                },
                {
                    // Interprets `@import` and `url()` like `import/require()` and will resolve them
                    loader: 'css-loader'
                },
                {
                    // Loader for webpack to process CSS with PostCSS
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () { // post css plugins, can be exported to postcss.config.js
                            return [
                                // require('precss'),
                                require('autoprefixer')
                            ];
                        }
                    }
                },
                {
                    // Loads a SASS/SCSS file and compiles it to CSS
                    loader: 'sass-loader'
                }
            ]
        }
    ]
},
output: {
    path: __dirname + '/webpack',
    filename: "[name].js"
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    })
],
externals: {
    jquery: 'jQuery',
}

};

and my shopApps wherein i have angular app and i call js files

require('./assets/css/style.css');
require('./assets/sass/app.scss') ;
import 'jquery';
import 'popper.js'
import 'bootstrap-material-design';
import 'moment';
import 'jalali-moment';
import 'swiper';
import 'underscore';
import angular from 'angular';
import ngRoute from 'angular-route';
import localStorage from 'angular-local-storage';
import moment from 'angular-moment';
const shopApps = angular.module('shopApp', [ngRoute,localStorage,moment]);
//router
require('./routerShopping')(shopApps);
require('./shopService')(shopApps);
require('./layout/headerFooter/header/webpackHeaderReq')(shopApps);
require('./homePage/webpackReqHome')(shopApps);
require('./assets/plugins/webpackReqPlugin')(shopApps);

and my html file wherein i write script tag for swiper and html code

<div class="bg-gray-light">
<div class="card bg-transparent">
    <div class="card-header text-center border-bottom-0">
        <h1 class="">
        are you have pet ?
        </h1>
        <h3>
            are you want pet
        </h3>
    </div>
    <div class="card-body text-center">
        <div class="swiper-container chosePet">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-18.png" alt="Dog">
                    </a>

                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-17.png" alt="Cat">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-15.png" alt="bird">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-16.png" alt="rabbit">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-19.png" alt="reptile">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  (function () {
    "use strict";
      import Swiper from  'swiper/dist/js/swiper';
        var bannerSlider = new Swiper('.chosePet', {
            slidesPerView: 1,
            fadeEffect: {
           crossFade: true
         },
          effect: 'fade',
          allowTouchMove: false,
          autoplay: {
              delay: 1000,
              disableOnInteraction: false,
              reverseDirection:true
          },
      })
    })();
</script>

when i bundel fils and start http server i have error

ReferenceError: Swiper is not defined

thank you for help me

i use swiper slider for sliders in my website when i use webpack and create app js for entry webpack No longer can read swiper.js my config webpack

const webpack = require('webpack');
module.exports = {
mode:"development",
context: __dirname,
entry: {
    vendor: [
        './node_modules/jquery/dist/jquery.js',
    ],
    shopApps: "./apps/shop/shopApp.js",

},
module: {
    rules: [
        {
            test : /\.jsx?$/,
            loader: 'babel-loader',
            // exclude: ['/node_modules/','/assets/sass','/assets/plugins/'],

        },
        {
            test: /\.(html)$/,
            loader: 'html-loader',
            exclude: '/node_modules/'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
            exclude: ['/node_modules/',__dirname+'/assets/plugins/'],
        },
        {
            test: /jquery.+\.js$/,
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            },{
                loader: 'expose-loader',
                options: '$'
            }]
        },
        {
            test: /\.(scss)$/,
            use: [
                {
                    // Adds CSS to the DOM by injecting a `<style>` tag
                    loader: 'style-loader'
                },
                {
                    // Interprets `@import` and `url()` like `import/require()` and will resolve them
                    loader: 'css-loader'
                },
                {
                    // Loader for webpack to process CSS with PostCSS
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () { // post css plugins, can be exported to postcss.config.js
                            return [
                                // require('precss'),
                                require('autoprefixer')
                            ];
                        }
                    }
                },
                {
                    // Loads a SASS/SCSS file and compiles it to CSS
                    loader: 'sass-loader'
                }
            ]
        }
    ]
},
output: {
    path: __dirname + '/webpack',
    filename: "[name].js"
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
    })
],
externals: {
    jquery: 'jQuery',
}

};

and my shopApps wherein i have angular app and i call js files

require('./assets/css/style.css');
require('./assets/sass/app.scss') ;
import 'jquery';
import 'popper.js'
import 'bootstrap-material-design';
import 'moment';
import 'jalali-moment';
import 'swiper';
import 'underscore';
import angular from 'angular';
import ngRoute from 'angular-route';
import localStorage from 'angular-local-storage';
import moment from 'angular-moment';
const shopApps = angular.module('shopApp', [ngRoute,localStorage,moment]);
//router
require('./routerShopping')(shopApps);
require('./shopService')(shopApps);
require('./layout/headerFooter/header/webpackHeaderReq')(shopApps);
require('./homePage/webpackReqHome')(shopApps);
require('./assets/plugins/webpackReqPlugin')(shopApps);

and my html file wherein i write script tag for swiper and html code

<div class="bg-gray-light">
<div class="card bg-transparent">
    <div class="card-header text-center border-bottom-0">
        <h1 class="">
        are you have pet ?
        </h1>
        <h3>
            are you want pet
        </h3>
    </div>
    <div class="card-body text-center">
        <div class="swiper-container chosePet">
            <div class="swiper-wrapper">
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-18.png" alt="Dog">
                    </a>

                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-17.png" alt="Cat">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-15.png" alt="bird">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-16.png" alt="rabbit">
                    </a>
                </div>
                <div class="swiper-slide bg-transparent">
                    <a class="cursor">
                        <img class="img-fluid" src="/apps/shop/assets/img/body/pet buy-19.png" alt="reptile">
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
  (function () {
    "use strict";
      import Swiper from  'swiper/dist/js/swiper';
        var bannerSlider = new Swiper('.chosePet', {
            slidesPerView: 1,
            fadeEffect: {
           crossFade: true
         },
          effect: 'fade',
          allowTouchMove: false,
          autoplay: {
              delay: 1000,
              disableOnInteraction: false,
              reverseDirection:true
          },
      })
    })();
</script>

when i bundel fils and start http server i have error

ReferenceError: Swiper is not defined

thank you for help me

Share Improve this question asked Mar 8, 2019 at 15:15 nima amr 6611 gold badge6 silver badges13 bronze badges

Add a comment |

4 Answers 4

Sorted by: Reset to default 11

This method solved my problem, according to the documentation, I did this and it helped me a lot.

Import Swiper and modules.

I wanted to use coverflow effect and i added it myself, You can also add different effect if you want.

import {
    Swiper,
    Navigation,
    Pagination,
    Scrollbar,
    EffectCoverflow
} from 'swiper/dist/js/swiper.esm.js';

Install modules

Then i initial the swiper

Swiper.use([Navigation, Pagination, Scrollbar, EffectCoverflow]);

Now you can use Swiper

var swiper = new Swiper('.swiper-container', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: false
    }
});

You can also read more about this in custom build section of this link

https://idangero.us/swiper/api/#custom-build

2023 Update

From swapper docs version 9.2 Installation.

# npm install swiper
# or
# yarn add swiper

Import core version + navigation, pagination modules as follow:

import Swiper from 'swiper';
import {Navigation,Pagination,Autoplay} from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

init Swiper as follow:

  const swiper = new Swiper('#blogs-swiper', {
    modules: [Navigation, Pagination, Autoplay], // NOTE! configure Swiper to use modules
    speed: 400,
    loop: false,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
      pauseOnMouseEnter: true
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      320: {
        slidesPerView: 1,
        spaceBetween: 20
      },
      575: {
        slidesPerView: 2,
        spaceBetween: 20
      },
      640: {
        slidesPerView: 3,
        spaceBetween: 20
      },
      992: {
        slidesPerView: 3,
        spaceBetween: 20
      }
    }
  });

According to the docs with Webpack you can import Swiper as CommonJS module as following:

var Swiper = require('swiper');

or if you need the ES module then:

import Swiper from 'swiper';

Imported it as follows for pagination, scrollbar and modules to work:

import Swiper from '../../../node_modules/swiper/swiper-bundle.js'
import '../../../node_modules/swiper/swiper-bundle.min.css'

Initialization then:

return new Swiper('.swiper', {
        slidesPerView: 1,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: false,
        },
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        // Responsive breakpoints
      })
  // Here we define a variable that returns the swiper
  const carousel = carouselProperties()
  // Afte we define this variable we can finally call the init function
  carousel.init()

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - swiper slider not work when i user webpack and import this in app js - Stack Overflow

4 Answers 4

Import Swiper and modules.

Install modules

Now you can use Swiper

2023 Update

与本文相关的文章

评论列表(0)