Carousel (Slider)

A slideshow component for cycling through elements (images or slides with any content) like a carousel.

Finder component

Add Package

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

Remove Package

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

Vertical carousel

Result
HTML

<!-- Vertical carousel -->
  <ngx-slick-carousel [config]="config" [config]="verticalConfig"> 
    <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>

<!-- Set swiper Option -->
verticalConfig = {
  infinite: true,
  autoplay: true,
  autoplaySpeed: 2000,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  vertical: true // Enable vertical sliding
}

Responsive with multiple items + Controls and nav outside

Result
HTML

<!-- Responsive with multiple items + Controls and nav outside -->
<ngx-slick-carousel [config]="config" class="slickSwiper"> 
    <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>

<!-- Set swiper Option -->
config = {
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
      },
    },
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 3,
      },
    },
  ],
};