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