Angular 7 | Implement Slick Carousel with 3 Steps having Custom Navigation in Angular 6+

In our previous post, we discussed How to Implement Swiper Carousel in Angular in 3 easy steps,  Today we will discuss another but very powerful jQuery dependent Carousel Slick, which can be easily Implemented in and Angular 6+ version application.

Slick is very popular for a number of great features like AutoPlay, LazyLoaded images, Responsive and mobile first layout with other many customizable features.

In this article, we create a new Angular 7 Project and Implement Slick Carousel with custom Navigation Arrows.

 

 

Also, See:
Angular – Implement Ultimate! Swiper Image Slider/ Carousel in 3 Steps
Owl Carousel 2 in Angular 6/7
Owl Carousel 2 with Custom Navigation in jQuery

Step 1) Create a new Angular’s latest project with version 7.2.5

 

Step 2) Install NPM packages for ngx-slick-carousel and other dependencies for jquery and slick-carousel

 

Step 3) Make changes in the angular.json file to include Slick js and CSS files. These files will be available after installing the above packages in step 2

angular.json

 

Make changes in app main module file to include Slick package.

app.module.ts

Add slick directive in App component with various attribute options and event handling.

app.component.html

 

Slick directive above having methods which need to be added in App component file app.component.ts

Slick carousel next prev navigation buttons can be customized by adding following CSS in styles.scss

See working demo link here

After following above steps you will be able to see a beautiful Slick carousel in Angular App by running   $ ng serve --open . This command will rum app in the browser.

3 thoughts on “Angular 7 | Implement Slick Carousel with 3 Steps having Custom Navigation in Angular 6+”

    1. This worked for me = >

      slideConfig = {
      “slidesToShow”: 3,
      “slidesToScroll”: 2,
      “nextArrow”:”“,
      “prevArrow”:”“,
      “dots”:false,
      “infinite”: false,
      “responsive”: [
      {
      “breakpoint”: 1920,
      “settings”: {
      “slidesToShow”: 3,
      “slidesToScroll”: 3,
      “infinite”: true,
      “dots”: true
      }
      },{
      “breakpoint”: 1024,
      “settings”: {
      “slidesToShow”: 2,
      “slidesToScroll”: 2,
      “infinite”: true,
      “dots”: true
      }
      },
      {
      “breakpoint”: 600,
      “settings”: {
      “slidesToShow”: 1,
      “slidesToScroll”: 1
      }
      },
      {
      “breakpoint”: 480,
      “settings”: {
      “slidesToShow”: 1,
      “slidesToScroll”: 1
      }
      }
      ]
      };

Leave a Reply

Your email address will not be published. Required fields are marked *