rm-carousel
Version:
A highly optimized and fully customizable pure angular standalone component and solution for horizontal scrolling images with lazy loading.
1 lines • 6.31 kB
Source Map (JSON)
{"version":3,"file":"rm-carousel.mjs","sources":["../../../projects/rm-carousel/src/lib/rm-carousel.component.ts","../../../projects/rm-carousel/src/rm-carousel.ts"],"sourcesContent":["import { Component, Input, OnDestroy, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nexport interface ISlides {\n url: string;\n title: string;\n description: string;\n}\n@Component({\n selector: 'rm-carousel',\n imports: [CommonModule],\n template: `\n <div class=\"slides\">\n <div\n class=\"slide\"\n [ngStyle]=\"{\n 'background-image': 'url(' + slides[currentSlide].url + ')',\n opacity: hidden ? 0 : 1,\n transition: 'opacity ' + animationSpeed + 'ms ease-in-out'\n }\"\n ></div>\n\n @if (indicatorsVisible) {\n <div id=\"indicators\">\n @for (slide of slides; track $index; ) {\n <div\n (click)=\"jumpToSlide($index)\"\n class=\"indicator\"\n [ngClass]=\"{ active: $index == currentSlide }\"\n ></div>\n }\n </div>\n }\n\n <button (click)=\"next()\" class=\"nextButton\">></button>\n <button (click)=\"previous()\" class=\"previousButton\"><</button>\n </div>\n `,\n styles: `\n :host {\n display: block;\n width: 100%;\n\n .slides {\n width: 100%;\n height: 700px;\n border-radius: 10px;\n overflow: hidden;\n position: relative;\n\n .slide {\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n position: relative;\n }\n\n .nextButton,\n .previousButton {\n position: absolute;\n top: 50%;\n border: 0px;\n background-color: transparent;\n font-size: 40px;\n color: #fff;\n cursor: pointer;\n }\n\n .nextButton {\n right: 20px;\n }\n\n .previousButton {\n left: 20px;\n }\n\n #indicators {\n position: absolute;\n left: 0px;\n right: 0px;\n margin: auto;\n bottom: 20px;\n width: 200px;\n\n .indicator {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #fff;\n display: inline-block;\n margin: 0px 5px;\n cursor: pointer;\n transition: background-color 0.5s ease-in-out;\n\n &.active {\n background-color: #4f4f4f;\n }\n }\n }\n }\n }\n `\n})\nexport class RmCarouselComponent implements OnInit, OnDestroy {\n @Input() slides: ISlides[] = [];\n @Input() indicatorsVisible = true;\n @Input() animationSpeed = 500;\n @Input() autoPlay = false;\n @Input() autoPlaySpeed = 3000;\n currentSlide = 0;\n // faArrowRight = faArrowRight;\n // faArrowLeft = faArrowLeft;\n hidden = false;\n jumpToSlideClearTime!: ReturnType<typeof setTimeout>;\n ngOnInitClearTime!: ReturnType<typeof setInterval>;\n\n next() {\n let currentSlide = (this.currentSlide + 1) % this.slides.length;\n this.jumpToSlide(currentSlide);\n }\n\n previous() {\n let currentSlide =\n (this.currentSlide - 1 + this.slides.length) % this.slides.length;\n this.jumpToSlide(currentSlide);\n }\n\n jumpToSlide(index: number) {\n this.hidden = true;\n this.jumpToSlideClearTime = setTimeout(() => {\n this.currentSlide = index;\n this.hidden = false;\n }, this.animationSpeed);\n }\n\n ngOnInit() {\n if (this.autoPlay) {\n this.ngOnInitClearTime = setInterval(() => {\n this.next();\n }, this.autoPlaySpeed);\n }\n }\n\n ngOnDestroy(): void {\n clearInterval(this.ngOnInitClearTime);\n clearTimeout(this.jumpToSlideClearTime);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}