Slide through various components in Angular

Question

I'm building a mobile app using Angular in the front-end.

Within this app, ought to build a slider composed with more than 1 components. To better express that visually: the slider has 3 slides where each is a different component (so, 3 components in total).

After testing various sliders, Ng2Carouselamos is my choice. Was able to implement it using 1 component and it was straightforward. But i'm not able to do it using the 3 wanted components.

How can this be achieved?

Answer 1

Managed to accomplish what was looking for using angular2-useful-swiper.

In order to achieve this, followed the following steps (explained also in their documentation):

npm install --save angular2-useful-swiper

npm install --save [email protected]

then add the js and css to angular-cli.json:

"styles": [
    "styles.css",
    "../node_modules/swiper/dist/css/swiper.css"        
],
"scripts": [
    "../node_modules/swiper/dist/js/swiper.js"                
],

Afterwards, imported the SwiperModule at the appropriate level in my app.

For example in app.module.ts:

import { NgModule }       from '@angular/core';

import { SwiperModule } from 'angular2-useful-swiper';

import { AppComponent }   from './app.component';
import { DemoComponent }   from './demo.component';

@NgModule({
    imports: [
        SwiperModule
    ],
    declarations: [
        AppComponent,
        DemoComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Then, inserted the swiper component to the component to create a slider and add the content:

<my-component>
   <swiper [config]="config">
    <div class="swiper-wrapper">
        <div class="swiper-slide">HERE GOES SELECTOR 1</div>
            <div class="swiper-slide">HERE GOES SELECTOR 2</div>
            <div class="swiper-slide">HERE GOES SELECTOR 3</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </swiper>
</my-component>

Had to set the config for the swiper in the component and bind it to the component config property as above:

export class MyComponent implements OnInit {

    config: SwiperOptions = {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
    };

Set the height and width of the component. It can be targeted by its name, swiper.

swiper{
    height: 300px;
    width: 400px;
}

After following the previous steps, was getting:

ERROR ReferenceError: Swiper is not defined

To solve this, just added manually the Swiper 3.4.2 to the single page:

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>