CODEWITHSUNDEEP
laravelswiper.js
story ks
story ks

Reputation: 850

[laravel][npm] I can't use swiper error Uncaught TypeError: Swiper is not a constructor

Today I try swiper but not working.

I install Swiper with npm

npm install swiper

this is my code

index.blade.php

<div class="swiper-container">
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <div class="card">
                <img src="..."
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <div class="card-text">
                        <h5 class="float-left"><b>Phi Phi Island</b></h5>
                        <h6 class="float-right">Id : 12001</h6>
                        <br><br>
                        <p>This is a wider card with supporting text below as a natural
                            lead-in to
                            additional content. This content is a little bit longer.</p>
                        <hr>
                        <div>
                            <div class="float-left">Adult</div>
                            <div class="float-right">200</div>
                            <br>
                            <div class="float-left">Child</div>
                            <div class="float-right">100</div>
                            <br>
                            <div class="float-left">Infant</div>
                            <div class="float-right">0</div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button type="button" class="btn btn-outline-danger">See detail
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</div>

This is script

$(document).ready(function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                spaceBetween: 30,
   });
});

app.js 

window.Swiper = require('swiper');

app.scss

@import "~swiper/swiper.scss";

So I run npm run dev already.

result is

VM3130 app.js:31708 Uncaught TypeError: Swiper is not a constructor
    at HTMLDocument.<anonymous> ((index):556)
    at mightThrow (VM3130 app.js:31415)
    at process (VM3130 app.js:31483)

I code follow swiperjs.com but not working, please help me!!

Upvotes: 2

Views: 2888

Answers (4)

Hooman Limouee
Hooman Limouee

Reputation: 1423

For Laravel v9.x and swiperjs v8.x I've found the solution to install swiperjs properly.

Here is the answer

Upvotes: 0

Ricardinho
Ricardinho

Reputation: 609

I believe there are an infinite number of ways to do it. But I'll show you how I do it.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    // add these 2 lines
    .js('node_modules/swiper/swiper-bundle.js', 'public/js')
    .postCss('node_modules/swiper/swiper-bundle.min.css', 'public/css')
    // end
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

Save your changes and update your node_modules directory

npm run dev

Then you have to import it:

<link href="{{ asset('css/swiper-bundle.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/swiper-bundle.js') }}"></script>

Upvotes: 0

Suhrab Y
Suhrab Y

Reputation: 203

window.Swiper = require('swiper/swiper-bundle');

should be like this in resources app

Upvotes: 1

story ks
story ks

Reputation: 850

My solution

in app.js

window.Swiper = require('swiper/js/swiper');

Upvotes: 2

Related Questions