Use iDangero.us's Swiper in Angular.
angular2-useful-swiper
Use iDangero.us's great slider Swiper in Angular 2.
Install
npm install --save angular2-useful-swiper
Setup
Add Swiper to your single page
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>
SystemJS
In the SystemJs config file (systemjs.config.js) add a mapping for the package
var map = {
...
'angular2-useful-swiper': 'node_modules/angular2-useful-swiper/lib'
};and add the package to the list of packages.
var packages = {
...
'angular2-useful-swiper': { main: 'swiper.module.js', defaultExtension: 'js' }
};or for angular-cli
Just install the package and then import the module as below.
How to use it
Import the SwiperModule at the appropiate level in your app.
For example in app.module.ts
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- --------------------------
------ - --------------- - ---- -----------------------------
------ - -------------- - ---- ----------------------------
------ - ------------- - ---- ---------------------------
------ - ------------ - ---- ------------------------- ---- --- ----------- --- ---- ---- -- -----------------------------------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -------------------
-----------
-------- -
--------------
-------------
----------------
---------------
------------
--
------------- -
-------------
-------------
--
---------- --------------
--
------ ----- --------- - -Add the swiper component to your component to create a slider and add the content as you normally would to set up a slider (see the official demos for more information). Note, you don't need to include the swiper-container div just the content, but the slides should be contained in a swiper-wrapper div and have the class swiper-slide.
-- -------------------- ---- -------
--------------
------- ------------------
---- -----------------------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- -------
---- -------------------------- --------
------
---- --- ---------- ---
---- --------------------------------
---- --- ------ ---
---- ---------------------------------
---- ---------------------------------
---------
---------------Set the config for the swiper in you component and bind it to the component config property as above.
-- -------------------- ---- -------
------ ----- ----------- ---------- ------ -
------- ------ - -
----------- ---------------------
-------------------- -----
----------- ----------------------
----------- ----------------------
------------- --
--Set the height and width of the component. It can be targeted by its name ##swiper##
-- -------------------- ---- -------
-------
------- ------
------ ------
-
--- --------- ---- ------ --- --- -------- -- -------------- ----- ------- --- ----- ------ -- --- ------ ---- ---- ----
---- ------ --- ------- ----- ----- -- --- --- --- ---- --- ---- -- ---- -----
-------
------- ------------------
---- -----------------------
---- -------------------- ----------- ----- -- ------- --------------
------
---- --------------------------------
---- ---------------------------------
---- ---------------------------------
---------Manually initializing the Swiper
By default the Swiper will be created in the AfterViewChecked event of the component. If the swiper is not going to have been rendered at this time (if it is on a hidden tab for example), it is best to handle the initialization manually. To do this use the component's initialize property and only set it's value to true when ready. This will then initialize the Swiper the next time the next AfterViewChecked event is fired to ensure the DOM is ready.
-- -------------------- ---- ------- --------- ---------- ------------------------- --------------- --------------------------- -- ----------------- --------------- -------------------------- ------- --------- ----------------- ------------- ------------------------------ ------- --------------------- ------- -------- -------------------- ----------- ----- -- --------------- -------------- --------- ------- -------------------------------- ------- --------------------------------- ------- --------------------------------- ----------- ------------------ -----------
Accessing the Swiper instance
When a new instance of Swiper is created it is set as a property on the component. You can then access this by using a template reference. For example add the template reference #usefulSwiper
<swiper [config]="config" #usefulSwiper>
<div class="swiper-wrapper">
<img class="swiper-slide" *ngFor="let image of images" [src]="image">
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</swiper>..and then you can use the reference to access the Swiper property.
<button (click)="usefulSwiper.Swiper.createLoop()">loop</button>
Future
Next step is to improve the TypeScript integration by creating an interface for the options. Maybe also create some content templates for frequently used sliders.
HomePage
https://github.com/Useful-Software-Solutions-Ltd/angular2-useful-swiper#readme
Repository
git+https://github.com/Useful-Software-Solutions-Ltd/angular2-useful-swiper.git
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005598081e8991b448d710c