Angular Simple Slider (ngx-simple-slider)

A simple way to display a efficient slider in angular 7

Getting Started

Links

• demo
• github repository
• my twitter

Install

npm i ngx-simple-slider

Import "NgxSimpleSliderModule" in your angular module (or feature module).

app.module.ts

import { NgxSimpleSliderModule } from 'ngx-simple-slider';

@NgModule({
  imports: [NgxSimpleSliderModule]
})
export class AppModule {}

Add "simpleSlider" in a new div and add somes items.

app.component.html

<div simpleSlider>
  <div><img src="https://mon-image1.jpg" alt="image 1" /></div>
  <div><img src="https://mon-image2.jpg" alt="image 2" /></div>
  <div><img src="https://mon-image3.jpg" alt="image 3" /></div>
</div>

<button id="prev"><</button>
<button id="next">></button>

A concrete example with somes parameters

<section class="slider">
  <div
    simpleSlider
    currentSlide="customIdForCurrentSlide"
    prev="customIdPrevBtn"
    next="customIdNextBtn"
    [transitionTime]="300"
    [automatic]="true"
  >
    <div class="slider__item" *ngFor="let item of slide">
      <img [attr.src]="item.image" alt="" />
    </div>
  </div>

  <button class="slider__prev" id="customIdPrevBtn">previous</button>
  <button class="slider__next" id="customIdNextBtn">next</button>
  <div class="slider__current" id="customIdForCurrentSlide"></div>
  <div class="slider__paginated" id="paginate">
    <button data-slide="1" role="button" aria-label="Go to slide 1">1</button>
    <button data-slide="2" role="button" aria-label="Go to slide 2">2</button>
    <button data-slide="3" role="button" aria-label="Go to slide 3">3</button>
  </div>
</section>

.slider {
  position: relative;

  &__item {
    height: 400px;
    position: relative;

    img {
      height: 100%;
      left: 0;
      object-fit: cover;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
  &__prev,
  &__next,
  &__current {
    appearance: none;
    background-color: #000;
    border: 0;
    bottom: 0;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    padding: 15px;
    position: absolute;
    z-index: 2;
  }
  &__prev {
    left: 0;
  }
  &__next {
    right: 0;
  }
  &__current {
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    z-index: 1;
  }
  &__paginated {
    position: absolute;
    top: 0;
    > button.active {
      background-color: red;
    }
  }
}

Docs parameters

| Parameters name | Default value | Functionality | | --------------- | ------------- | ------------------------------------------------ | | simpleSlider | - | init slider | | prev | "prev" | custom id that prev button | | next | "next" | custom id that next button | | paginate | "paginate" | custom id that paginate buttons | | currentSlide | "" | custom id that displays the pagination (ex :2/7) | | automatic | false | allow loop (not recommended) | | automaticTime | 4000 | time beetween two slide in automatic mode | | transitionTime | 400 | time of transition in milliseconds |

And that's it, Enjoy !