@windmillcode/wml-slicebox v1.1.5

WmlSlicebox

This library was generated with Angular CLI version 15.0.0. but is comptablile as far back as angular 11. this design was remodeled by older code found in this link. Remastered for angular w/ additional features. to be used as a carousel

Usage

npm install -s @windmillcode/wml-slicebox

• import wml-slicebox into the needed module

// angular
import { NgModule } from '@angular/core';


import { WmlSliceboxModule } from '@windmillcode/wml-slicebox';


@NgModule({
  declarations: [
    ...
  ],
  imports: [
    WmlSliceboxModule
  ],
})
export class TargetModule { }

• the use it in your component thats it

import { WmlSliceboxImg, WmlSliceboxParams } from '@windmillcode/wml-slicebox';

  sliceBoxParams = new WmlSliceboxParams({
    images: WmlSliceboxImg[],
  });

    <wml-slicebox [params]="sliceBoxParams" ></wml-slicebox>

Full Sample

import { WmlSliceboxImg, WmlSliceboxParams } from '@windmillcode/wml-slicebox';
import { faker } from '@faker-js/faker';
  pickers=[]
  images: WmlSliceboxImg[] = Array(5)
  .fill(null)
  .map((nullVal, index0) => {

    let img = new WmlSliceboxImg({
      src:faker.image.abstract(),//REPLACE with your image here
      value: index0.toString(),
    });

    this.pickers.push({
      value:index0,
      class:"unpicked"
    })

    return img;
  });

  sliceBoxParams = new WmlSliceboxParams({
    images: this.images,
    orientation:"v",
    // nextRotationDegree:"360deg",
    disperseFactor:40,
    disperseSpeed:4000,
    speed:1500,
    sequentialFactor:150,
    autoplay:false,
  });

  moveToNextSlide =()=>{
    this.sliceBoxParams.moveToNextSlideSubj.next()
  }

  moveToPrevSlide =()=>{
    this.sliceBoxParams.moveToPrevSlideSubj.next()
  }

  jumpToSlide = (myPicker:HomeMainPicker)=>{
    this.pickers
    .forEach((picker)=>{
      picker.class ="unpicked"
    })
    myPicker.class = "picked"

    this.sliceBoxParams.jumpToSlideSubj.next(myPicker.value)
    this.cdref.detectChanges()
  }

<div >
  <section >
    <div class=icon (click)="moveToPrevSlide()">
      <i class="fa-solid fa-chevron-left"></i>
    </div>
    <wml-slicebox [params]="sliceBoxParams" class=useThisClassToResizeSlicebox></wml-slicebox>
    <div class=icon (click)="moveToNextSlide()">
      <i class="fa-solid fa-chevron-right"></i>
    </div>
  </section>
  <section >
    <div (click)="jumpToSlide(picker)" [class]="picker.class" *ngFor="let picker of pickers">
      <label>{{picker.value}}</label>
    </div>
  </section>
</div>

Configs