Hi, I'am new to Angular and little bit stuck with Swiper
<http://idangero.us/swiper/get-started/> integration into my project.
I've installed swiper module:
npm install swiper --save
Then I have added paths to ".angular-cli.json" file like this:
"styles": [
"../node_modules/materialize-css/dist/css/materialize.min.css",
"../node_modules/swiper/dist/css/swiper.min.css",
"styles.scss"],"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/materialize-css/dist/js/materialize.min.js",
"../node_modules/swiper/dist/js/swiper.min.js"],
Then I inserted basic html template for my slider into angular app
component:
<!-- 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>
But I can't get how to initialize js part of this lib.
<body>
...
<script>
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
// And if we need scrollbar
scrollbar{
el: '.swiper-scrollbar',
},
})
</script></body>
There is an issue with var mySwiper = new Swiper ('.swiper-container', {...
when
I'am trying to add js into ts component.
So, what is the best way to add this lib into my Angular app and how to do
this?
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
