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.

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

6
Leave a Reply

avatar
4 Comment threads
2 Thread replies
6 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
NadirAbhilashChinnaNimishHarendra Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Amina
Guest
Amina

I want to ask how to make it responsive

Harendra
Guest

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

Chinna
Guest
Chinna

A responsive query is not working

Nimish
Guest
Nimish

Can you share the source link also for this post ?

Abhilash
Guest
Abhilash

How to disable draggable and hide nav icons dynamically

Nadir
Guest

How do I get two sliders work like the “Slider Syncing” example at http://kenwheeler.github.io/slick/

I added two sliders, but there are so many conflicts! I gave up. 🙁