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



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


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



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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

2 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
4 Comment authors
ChinnaNimishHarendraAmina Recent comment authors
newest oldest most voted
Notify of

I want to ask how to make it responsive


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 } } ] };


A responsive query is not working


Can you share the source link also for this post ?