Reputation: 41
I'm trying to get Swiper to work but it always throw me an error "Swiper is not a constructor"
I'm using http://idangero.us/swiper/get-started/#.WMsuihJ96MI as the Swiper library and installed this library as a meteor package.
client/body.js
Template.slider.onRendered(function(){
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: '.swiper-pagination',
// Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// And if we need scrollbar
scrollbar: '.swiper-scrollbar',
});
});
client/body.html
<body>
<h1>Test</h1>
{{> slider }}
</body>
<template name="slider">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</template>
Upvotes: 4
Views: 16092
Reputation: 11
In my case i fixed it by changing
import {Swiper, SwiperOptions} from "swiper";
to
import Swiper, {SwiperOptions} from "swiper"
;
Upvotes: 0
Reputation: 51
@mutdmour You should try Swiper.default(element,options)
Make sure to console you Swiper instance and check if, It's really a constructor or it's an object which has it's constructor in it's property. Sorry if I give a wrong info. Because my english is very weak and this is my first reply to a Forum.
Upvotes: 5