ngx-simple-slider
TypeScript icon, indicating that this package has built-in type declarations

1.2.0 • Public • Published

Angular Simple Slider (ngx-simple-slider)

A simple way to display a efficient slider in angular 7

Getting Started

Links

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 !

Package Sidebar

Install

npm i ngx-simple-slider

Weekly Downloads

6

Version

1.2.0

License

MIT

Unpacked Size

160 kB

Total Files

23

Last publish

Collaborators

  • maxime1jacquet