Angular super light Carousel

angular lightest carousel/slide show

no any dependencies required

this repo is a super light carousel based on scroll actions. please add CarouselComponent to modules(this component is a standalone component).

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    CarouselComponent,
})
export class AppModule { }

use like this:

` <carousel [isReverse]="false" [dots]="true" [navs]="true" [wheel]="50" [interval]="1000" [(selectedIndex)]="selectedIndex">
    <div #slide style="background-color:red;height:100px;min-width: 100%;">s</div>
    <div #slide style="background-color:blue;height:100px;min-width: 80%;">l</div>
    <div #slide style="background-color:yellow;height:100px;min-width: 50%;">l</div>
    <div #slide style="background-color:green;height:100px;min-width: 100%;">c</div>
 </carousel>

inputs:

| Name |Type |Default |Description | | ------------ | ------------ | ------------ | ------------ | | selectedIndex | number | 0 | a two way binding value for selected slider, from 0 to (length of #slide children - 1) | | dots | boolean | true | | | navs | boolean | true | | | reverse | boolean | false | set true to reverse direction | | interval | number(ms) | null | timer interval | | pauseOnHover | boolean | true | | | wheel | number | 50 |this value is sensitivity of the mouse wheel in pixels. This value determines the amount of pixel movement required to trigger a slide change. to disable, set value to 0|

• don't forget to use #slide on every slide.

• you should set width manually or you may use min-width!

• Demo: https://stackblitz.com/edit/angular-o1c9fo?file=src%2Findex.html

changelogs:

| version | description | | ------------ | ------------ | | 1.2.2 | wheel sensitivity added | | 1.2.1 | wheel functionality added |

DOnate:

• btc: 1Pnm7fWt4LRDjUC6CSfbjLftfYt7QnqJhv

• Tether: TKcPUCJFS8BHp1FKF3RJqSqKtdr4JuNSRX