Carousel

A slideshow component for cycling through elements (images or slides of text) like a carousel.

Cartzilla component

Add Package

npm install jquery 
npm install slick-carousel 
npm install ngx-slick-carousel

Add the swiper styles & scripts to the app styles in angular.json.

"styles": [
          "node_modules/slick-carousel/slick/slick.scss",
          "node_modules/slick-carousel/slick/slick-theme.scss"
          ],
"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/slick-carousel/slick/slick.min.js"
        ],

Remove Package

npm uninstall jquery 
          npm uninstall slick-carousel 
          npm uninstall ngx-slick-carousel

One item + Dots + Loop (defaults)

<!-- One item + Dots + Loop (defaults) -->
<ngx-slick-carousel [config]="Coverflow"  class="card-custom">
<div ngxSlickItem>
  <img src="path-to-image" alt="Image">
</div>
<div ngxSlickItem>
  <img src="path-to-image" alt="Image">
</div>
<div ngxSlickItem>
  <img src="path-to-image" alt="Image">
</div>
</ngx-slick-carousel>

Coverflow = {
  dots: true, // Show pagination dots
  arrows: true, // Show navigation arrows
  fade: true, // Enable fade effect
  infinite: true, // Enable infinite loop
  speed: 300, // Animation speed in milliseconds
  slidesToShow: 1, // Show 1 slide at a time
  slidesToScroll: 1,
  dots:true // for pagination
};

Multiple items + Static controls outside + No dots + Loop (Responsive)

<!-- Multiple items + Static controls outside + No dots + Loop (Responsive) -->
<ngx-slick-carousel [config]="Style">
   <div ngxSlickItem>
     <img src="assets/img/blog/meta/04.jpg" alt="Rafael Marquez">
   </div>
  <div ngxSlickItem>
     <img src="assets/img/blog/meta/05.jpg" alt="Rafael Marquez">
  </div>
  <div ngxSlickItem>
     <img src="assets/img/blog/meta/03.jpg" alt="Paul Woodred">
  </div>
</ngx-slick-carousel>


Style = {
 infinite: true,
 slidesToShow: 3,
 slidesToScroll: 1,
 arrows: true,
 responsive: [
  {
    breakpoint: 499,
    settings: {
      slidesToShow: 1
    }
  },
  {
    breakpoint: 700,
    settings: {
      slidesToShow: 2
    }
  }
 ]
};