ngx-academia-uniandes-library
Version:
This library is used for Academia-Uniandes system.
44 lines • 4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var PhotoGalleryComponent = /** @class */ (function () {
function PhotoGalleryComponent() {
this.currentIndex = 0;
}
PhotoGalleryComponent.prototype.previous = function () {
if (this.currentIndex === 0) {
this.currentIndex = this.slides.length - 1;
}
else {
this.currentIndex--;
}
};
PhotoGalleryComponent.prototype.next = function () {
if (this.currentIndex === this.slides.length - 1) {
this.currentIndex = 0;
}
else {
this.currentIndex++;
}
};
PhotoGalleryComponent.prototype.getCurrentSlideUrl = function () {
return "url('" + this.slides[this.currentIndex] + "')";
};
PhotoGalleryComponent.prototype.goTo = function (slideIndex) {
this.currentIndex = slideIndex;
};
PhotoGalleryComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'app-photo-gallery',
template: "\n <div class=\"slider\">\n <div>\n <div class=\"previous\"><i class=\"fa fa-angle-left\" (click)=\"previous()\"></i></div>\n <div class=\"next\"><i class=\"fa fa-angle-right\" (click)=\"next()\"></i></div>\n </div>\n <img *ngFor=\"let slide of slides; let i = index\"\n [src]=\"slide\" [ngClass]=\"{'image-selected': currentIndex === i}\"\n class=\"fade\"\n >\n </div>\n <div class=\"dotsContainer\">\n <div \n *ngFor=\"let slide of slides; let i = index\" \n class=\"dot\" \n (click)=\"goTo(i)\">\n <i class=\"fa fa-square\" [ngClass]=\"{'selected': currentIndex === i}\"></i>\n </div>\n </div>\n ",
styles: ["\n .fa-angle-left, .fa-angle-right {\n font-size: 45px;\n color: #757575;\n transition: color 0.3s linear !important;\n }\n\n .fa-angle-left:hover, .fa-angle-right:hover {\n color: #FFFF00;\n }\n\n .next {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n right: 32px;\n z-index: 1;\n cursor: pointer;\n }\n \n .previous {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n left: 32px;\n z-index: 1;\n cursor: pointer;\n }\n\n .slider {\n position: relative;\n margin: auto;\n overflow: hidden;\n display: grid;\n width: fit-content;\n max-width: 45vw;\n max-height: 60vh;\n border-radius: 15px;\n box-shadow: 0 6px 12px #757575;\n }\n\n .slider img {\n display: none;\n border-radius: 15px;\n }\n\n .slider img.image-selected {\n display: block;\n height: 60vh;\n }\n\n .dotsContainer {\n position: absolute;\n right: 0;\n left: 0;\n margin-top: 0.5rem;\n display: flex;\n justify-content: center;\n padding: 0;\n margin-bottom: 1 rem;\n }\n \n .dot {\n margin: 0 3px;\n cursor: pointer;\n }\n\n .fa-square {\n font-size: 15px;\n color: #757575;\n transition: color 0.3s linear !important;\n }\n\n .selected, .fa-square:hover {\n color: #FFFF00;\n }\n\n .fade {\n opacity: 1;\n animation-name: fade;\n animation-duration: 1s;\n }\n\n @keyframes fade {\n from {\n opacity: 0.4;\n }\n to {\n opacity: 1;\n }\n }\n "]
},] },
];
/** @nocollapse */
PhotoGalleryComponent.propDecorators = {
"slides": [{ type: core_1.Input },],
};
return PhotoGalleryComponent;
}());
exports.PhotoGalleryComponent = PhotoGalleryComponent;
//# sourceMappingURL=photo-gallery.component.js.map