Angular Image Slider v-17+

Angular 17 Image Slider is a versatile and feature-rich component that enhances user experiences by seamlessly presenting a collection of images in a visually appealing and interactive way. Leveraging the power of Angular, this slider provides a dynamic and customizable solution for showcasing image content within your web applications.

Instaltion

npm install --save wts-slider

import { Component } from "@angular/core";

import { WtsSliderModule, SliderOptions } from "wts-slider";

@Component({
  selector: "<COMPONENT-SELECTOR>",
  standalone: true,
  imports: [WtsSliderModule],
  templateUrl: "<COMPONENT>.html",
  styleUrl: "<COMPONENT>.scss",
})
export class MyComponent {
  options: SliderOptions = {};
}

HTML

  <wts-slider [options]="options" >
      <div slider class="__slider" style="background-color: aqua;">1</div>
      <div slider class="__slider" style="background-color: beige;">2</div>
      <div slider class="__slider" style="background-color: yellow;">3</div>
      <div slider class="__slider" style="background-color: blue;">4</div>
      <div slider class="__slider" style="background-color: burlywood;">5</div>
      <div slider class="__slider" style="background-color: darkgreen;">6</div>
      <div slider class="__slider" style="background-color:  darksalmon;">7</div>
  </wts-slider>

Properties

| Name | Description | | ----------------------------------------- | ------------------- | | (Optional) options: SliderOptions | *Default: {}* |

Example

Stackblitz Demo