ngx-simple-slider

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 !