Angular 8|9 Swiper Slider ngx-useful-swiper Examples

The Swiper Slider implementation tutorial using the ngx-useful-swiper package in the latest Angular version 9.

Image or HTML content sliders add are used for many purposes for users to display a number of items in a limited space like Amazone show items to buy and some websites or application displays offer sliders on the home page.

Swiper sliders are fully responsive and compatible with touch devices as well. Adapt to any screen size with options to configure a number of slides to show on each screen size. We will look into all these features in this tutorial.

In this article, we will implement the Swiper slider/ carousel in Angular application and will look into its features and configurational options by simple examples.

Version Check

@angular/cli 9.0.1

Swiper v9.0.3

You can continue the installation steps in your current project or create a new one using Ng CLI tool by running the following command:

 

Let’s get started!

Step 1) Install Swiper Slider packages

Run following NPM commands one by one to install the ngx-useful-swiper pacakge and also its type @types/swiper as we are using the JS library.

Step 2) Add Swiper style

Swiper slider is created by using some basic styling which we need to add in the project. We need to open the  angular.json file and append swiper.css under "styles" property as shown below:

Step 3) Update App Module

To use Swiper slider in a component, we need to import the NgxUsefulSwiperModule from 'ngx-useful-swiper' then add in the imports array as shown below:

That’s it we are done with the installation and configuration part to use Swiper slider in the Angular project.

Use Basic Swiper Slider in the Component

To demonstrate how simple is adding a Swiper slider, just follow these steps to add a most basic Slider in a component.

In the component template add following HTML content to add a Swiper slider:

In the above code, we have <swiper> component directive with an input property [config] to provider configuration object.

Slides to show are wrapped in a div with class ‘swiper-wrapper’. We are creating slides using Angular’s *ngFor directive to iterate over slidesDate with id and name properties.

There are also containers for pagination Dots and Next, Previous arrows.

 

Next, update the component class with the following code:

The SwiperOptions type provides the properties to configure the slider.

Configuration Options

Let’s have a look on some cool configurations available in Swiper slider:

breakpoints: This option takes screen size up to which we can control slider configuration. For example in the above object for screen size 400 number of slidesPerView should be 2.

autoplay: The autoplay property enables auto sliding of slides after some delay value.

navigation: Navigation arrows can be customized by adding custom classes for nextEl and prevEl properties.

initialSlide: Index number of the initial slide.
direction: Could be 'horizontal' or 'vertical' (for vertical slider).
speed: Duration of transition between slides (in ms)

effect: Transition effect. Could be “slide”, “fade”, “cube”, “coverflow” or “flip”

spaceBetween: Distance between slides in px.

centeredSlides: If true, then the active slide will be centered, not always on the left side.

grabCursor: Grab Cursor

Methods to Control Slider

Using the template variable we can get slider instances that can be used to get Slider properties for example Active Slide’s Index.

In the slider element set template variable #usefulSwiper

Now in component class, we need to import

To control slider just button with click events to move next, prev or to a specific slide index.

 

Binding Events on Swiper Slider

To bind events we use on the property in the configuration:

In the next article, we will get to know How to add an animation effect to slides in the Swiper carousel.

Leave a Reply

avatar
  Subscribe  
Notify of