nextalys-carousel 0.0.53 → 0.0.56

package/bundles/nextalys-carousel.umd.js

@@ -1,8 +1,12 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('@angular/common'), require('nextalys-js-helpers/dist/events'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/cdk/observers')) :
-    typeof define === 'function' && define.amd ? define('nextalys-carousel', ['exports', '@angular/core', '@angular/material/dialog', '@angular/common', 'nextalys-js-helpers/dist/events', '@angular/material/button', '@angular/material/icon', '@angular/cdk/observers'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['nextalys-carousel'] = {}, global.ng.core, global.ng.material.dialog, global.ng.common, global.events, global.ng.material.button, global.ng.material.icon, global.ng.cdk.observers));
-}(this, (function (exports, core, dialog, common, events, button, icon, observers) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('@angular/common'), require('nextalys-js-helpers/dist/events'), require('swiper'), require('@angular/material/button'), require('@angular/material/icon'), require('swiper/angular')) :
+    typeof define === 'function' && define.amd ? define('nextalys-carousel', ['exports', '@angular/core', '@angular/material/dialog', '@angular/common', 'nextalys-js-helpers/dist/events', 'swiper', '@angular/material/button', '@angular/material/icon', 'swiper/angular'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['nextalys-carousel'] = {}, global.ng.core, global.ng.material.dialog, global.ng.common, global.events, global.swiper, global.ng.material.button, global.ng.material.icon, global.angular));
+}(this, (function (exports, core, dialog, common, events, SwiperCore, button, icon, angular) { 'use strict';
+
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var SwiperCore__default = /*#__PURE__*/_interopDefaultLegacy(SwiperCore);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -352,16 +356,29 @@
         { type: dialog.MatDialogRef }
     ]; };
 
+    var NxsSwiperTemplateDirective = /** @class */ (function () {
+        function NxsSwiperTemplateDirective() {
+        }
+        return NxsSwiperTemplateDirective;
+    }());
+    NxsSwiperTemplateDirective.decorators = [
+        { type: core.Directive, args: [{
+                    selector: '[nxsSwiperTemplate]',
+                },] }
+    ];
+
+    // install Swiper modules
+    SwiperCore__default['default'].use([SwiperCore.Navigation, SwiperCore.Pagination, SwiperCore.Autoplay, SwiperCore.Lazy, SwiperCore.Thumbs]);
     var NxsCarouselComponent = /** @class */ (function () {
         function NxsCarouselComponent(matDialog, zone, platformId, config) {
             this.matDialog = matDialog;
             this.zone = zone;
             this.platformId = platformId;
             this.config = config;
-            this.mutationObserver = null;
-            this.recreateSliderSubscribed = false;
+            this.lazy = true;
             this.eventsCollector = new events.EventsCollector();
-            this.options = {};
+            this.options = null;
+            this.thumbnailsOptions = null;
             this.hasHtmlContent = false;
             this.slidesCount = 0;
             this.slideChange = new core.EventEmitter();
@@ -377,15 +394,7 @@
         Object.defineProperty(NxsCarouselComponent.prototype, "setOptions", {
             set: function (val) {
                 this.options = this.setDefaultOptions(val, false);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(NxsCarouselComponent.prototype, "setImages", {
-            set: function (val) {
-                this.images = val;
-                this.initSlides();
-                this.createSlider(true);
+                this.setThumbnailsOptions();
             },
             enumerable: false,
             configurable: true
@@ -399,144 +408,20 @@
                 return;
             console.log.apply(console, __spreadArray(['[NxsCarousel]'], __read(args)));
         };
-        NxsCarouselComponent.prototype.onContentChange = function (changes) {
-            // console.log("Log: NxsCarouselComponent -> onContentChange -> changes", changes);
-            // changes.forEach(change => console.log(change.target));
-        };
-        NxsCarouselComponent.prototype.initSlides = function () {
-            var _this = this;
-            if (!this.isBrowser) {
-                this.log('prevent initSlides on platform server');
-                return;
-            }
-            if (!this.nxsSlidesWrapper) {
-                this.log('can not initSlides : nxsSlidesWrapper is not defined !');
-                return;
-            }
-            this.log('initSlides begins');
-            this.zone.runOutsideAngular(function () {
-                var e_1, _d, e_2, _e;
-                if (!_this.hasHtmlContent && _this.images) {
-                    _this.nxsSlidesWrapper.nativeElement.innerHTML = '';
-                    try {
-                        for (var _f = __values(_this.images), _g = _f.next(); !_g.done; _g = _f.next()) {
-                            var cImage = _g.value;
-                            var div = document.createElement('div');
-                            div.className = 'swiper-slide';
-                            div.style.backgroundImage = 'url(' + cImage.src + ')';
-                            if (_this.options.nxsCarouselImageBackgroundSize)
-                                div.style.backgroundSize = _this.options.nxsCarouselImageBackgroundSize;
-                            _this.nxsSlidesWrapper.nativeElement.appendChild(div);
-                        }
-                    }
-                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
-                    finally {
-                        try {
-                            if (_g && !_g.done && (_d = _f.return)) _d.call(_f);
-                        }
-                        finally { if (e_1) throw e_1.error; }
-                    }
-                    _this.slidesCount = _this.images.length;
-                    if (!!_this.options.nxsThumbnails && _this.options.nxsThumbnails.show) {
-                        _this.nxsThumbnailsSlidesWrapper.nativeElement.innerHTML = '';
-                        try {
-                            for (var _h = __values(_this.images), _j = _h.next(); !_j.done; _j = _h.next()) {
-                                var cImage = _j.value;
-                                var div = document.createElement('div');
-                                div.className = 'swiper-slide';
-                                div.style.backgroundImage = 'url(' + cImage.src + ')';
-                                _this.nxsThumbnailsSlidesWrapper.nativeElement.appendChild(div);
-                            }
-                        }
-                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
-                        finally {
-                            try {
-                                if (_j && !_j.done && (_e = _h.return)) _e.call(_h);
-                            }
-                            finally { if (e_2) throw e_2.error; }
-                        }
-                    }
-                    _this.log('initSlides - images are defined - slides count => ', _this.slidesCount);
-                }
-                else if (_this.hasHtmlContent) {
-                    _this.log('initSlides - html content - slides length => ', _this.nxsSlidesWrapper.nativeElement.children.length);
-                    // eslint-disable-next-line @typescript-eslint/prefer-for-of
-                    for (var i = 0; i < _this.nxsSlidesWrapper.nativeElement.children.length; i++) {
-                        var child = _this.nxsSlidesWrapper.nativeElement.children[i];
-                        if (!child.className)
-                            child.className = 'swiper-slide';
-                        else if (child.className.indexOf('swiper-slide') === -1) {
-                            child.className += ' swiper-slide';
-                        }
-                    }
-                    _this.slidesCount = _this.nxsSlidesWrapper.nativeElement.children.length;
-                    _this.log('initSlides - html content - slides count => ', _this.slidesCount);
-                }
-            });
-        };
         NxsCarouselComponent.prototype.destroy = function () {
-            var _a, _b, _c;
+            var _a;
             if (!this.isBrowser) {
                 return;
             }
             (_a = this.eventsCollector) === null || _a === void 0 ? void 0 : _a.unsubscribeAll();
-            (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-            (_c = this.sliderInstance) === null || _c === void 0 ? void 0 : _c.destroy();
         };
         NxsCarouselComponent.prototype.ngOnDestroy = function () {
             this.destroy();
         };
-        NxsCarouselComponent.prototype.subscribeToSlideChanged = function () {
-            var _this = this;
-            if (!this.hasHtmlContent) {
-                this.log('subscribeToSlideChanged cannot be subscribed : has no html content');
-                return;
-            }
-            if (!this.nxsSlidesWrapper || !this.nxsSlidesWrapper.nativeElement) {
-                this.log('subscribeToSlideChanged error : nxsSlidesWrapper is not defined');
-                return;
-            }
-            if (typeof MutationObserver === 'undefined') {
-                this.log('cannot use mutation observer');
-                return;
-            }
-            if (this.mutationObserver)
-                this.mutationObserver.disconnect();
-            this.log('subscribe to mutation observer');
-            this.mutationObserver = new MutationObserver(function (mutationsList) {
-                var e_3, _d;
-                // console.log("Log: NxsCarouselComponent -> subscribeToSlideChanged -> mutationsList", mutationsList);
-                // console.log("Log: NxsCarouselComponent -> subscribeToSlideChanged -> MutationObserver");
-                _this.log('mutation observer - html content has changed');
-                if (mutationsList.length === 0)
-                    return;
-                var mustUpdate = false;
-                try {
-                    for (var mutationsList_1 = __values(mutationsList), mutationsList_1_1 = mutationsList_1.next(); !mutationsList_1_1.done; mutationsList_1_1 = mutationsList_1.next()) {
-                        var mutation = mutationsList_1_1.value;
-                        if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
-                            mustUpdate = true;
-                            break;
-                        }
-                    }
-                }
-                catch (e_3_1) { e_3 = { error: e_3_1 }; }
-                finally {
-                    try {
-                        if (mutationsList_1_1 && !mutationsList_1_1.done && (_d = mutationsList_1.return)) _d.call(mutationsList_1);
-                    }
-                    finally { if (e_3) throw e_3.error; }
-                }
-                if (mustUpdate) {
-                    _this.initSlides();
-                    _this.createSlider(true);
-                }
-            });
-            this.mutationObserver.observe(this.nxsSlidesWrapper.nativeElement, { childList: true, attributes: false, });
-        };
         NxsCarouselComponent.prototype.ngAfterViewInit = function () {
-            this.initSlides();
-            this.createSlider(true);
+            // console.log('thi.contents', this.contents);
+            // this.initSlides();
+            // this.createSlider(true);
         };
         NxsCarouselComponent.prototype.getMainSliderHeight = function () {
             if (!this.options)
@@ -554,10 +439,18 @@
         NxsCarouselComponent.prototype.setDefaultOptions = function (options, forDialog) {
             var _a;
             if (!options && forDialog) {
-                options = { nxsShowNavigationBullets: true, loop: true, nxsThumbnails: { show: true }, effect: 'slide', nxsShowNavigationArrows: true, nxsShowImagesCount: true };
+                options = {
+                    nxsShowNavigationBullets: true, loop: true, nxsThumbnails: { show: true }, effect: 'slide', nxsShowNavigationArrows: true, nxsShowImagesCount: true,
+                    lazy: true,
+                };
+            }
+            else if (!options) {
+                options = {
+                    nxsShowNavigationBullets: true, loop: true,
+                    nxsThumbnails: { show: false }, effect: 'slide', nxsShowNavigationArrows: true, nxsShowImagesCount: false, nxsCarouselDialogOptions: {},
+                    lazy: true,
+                };
             }
-            else if (!options)
-                options = { nxsShowNavigationBullets: true, loop: true, nxsThumbnails: { show: false }, effect: 'slide', nxsShowNavigationArrows: true, nxsShowImagesCount: false, nxsCarouselDialogOptions: {} };
             if (options.nxsCarouselDialogOptions) {
                 if (typeof options.nxsCarouselDialogOptions.nxsThumbnails === 'undefined')
                     options.nxsCarouselDialogOptions.nxsThumbnails = { show: false };
@@ -593,8 +486,37 @@
                 options.nxsfullscreenOnClick = false;
             if (options.nxsThumbnails.onMainSlider)
                 options.nxsShowNavigationBullets = false;
+            if (typeof options.lazy === 'undefined')
+                options.lazy = true;
+            if (typeof options.navigation === 'undefined')
+                options.navigation = true;
+            if (typeof options.pagination === 'undefined')
+                options.pagination = { clickable: true };
+            // console.log("Log ~ file: nxs-carousel.component.ts ~ line 272 ~ NxsCarouselComponent ~ setDefaultOptions ~ options", options);
             return options;
         };
+        NxsCarouselComponent.prototype.setThumbnailsOptions = function () {
+            var _a, _b;
+            if (!!((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.nxsThumbnails) === null || _b === void 0 ? void 0 : _b.show)) {
+                this.thumbnailsOptions = {
+                    slidesPerView: this.options.nxsThumbnails.perView,
+                    loop: false,
+                    freeMode: true,
+                    // watchSlidesVisibility: true,
+                    watchSlidesProgress: true,
+                    breakpoints: this.options.nxsThumbnails.breakpoints,
+                    // spaceBetween: 10,
+                };
+                if (this.lazy) {
+                    // Disable preloading of all images
+                    this.thumbnailsOptions.preloadImages = false;
+                    // Enable lazy loading
+                    this.thumbnailsOptions.lazy = true;
+                }
+                // this.thumbnailsSliderInstance = new Swiper(this.nxsThumbnailsSliderContainer.nativeElement, thumbnailsOptions);
+                // this.options.thumbs = { swiper: this.thumbnailsSliderInstance };
+            }
+        };
         NxsCarouselComponent.prototype.showFullScreenCarousel = function (images, wrapperClass) {
             this.options.nxsCarouselDialogOptions = this.setDefaultOptions(this.options.nxsCarouselDialogOptions, true);
             var data = { images: images, wrapperClass: wrapperClass, options: this.options.nxsCarouselDialogOptions };
@@ -606,112 +528,79 @@
                 disableClose: !this.options.nxsCarouselDialogExitable,
             });
         };
-        NxsCarouselComponent.prototype.createSlider = function (forceRecreate) {
-            var _this = this;
-            if (!this.isBrowser) {
-                this.log('prevent createSlider : platform is server');
-                return;
-            }
-            if (!this.nxsSliderContainer) {
-                this.log('can not createSlider : nxsSliderContainer is not defined !');
-                return;
-            }
-            this.log('createSlider', this.nxsSliderContainer.nativeElement);
-            if (this.slidesCount === 0) {
-                this.log('can not createSlider : slidesCount === 0');
-                this.subscribeToSlideChanged();
-                return;
-            }
-            if (this.sliderInstance && !forceRecreate) {
-                this.log('can re create slider => slider is already created.');
-                return;
-            }
-            this.zone.runOutsideAngular(function () { return __awaiter(_this, void 0, void 0, function () {
-                var _d, Swiper, thumbnailsOptions;
-                var _this = this;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
-                        case 0:
-                            this.destroy();
-                            this.options.pagination = {
-                                el: '.nxs-carousel-pagination',
-                                clickable: true,
-                                type: 'bullets',
-                            };
-                            this.options.navigation = {
-                                nextEl: '.nxs-carousel-button-next',
-                                prevEl: '.nxs-carousel-button-prev',
-                            };
-                            if (!!this.swiperLibrary) return [3 /*break*/, 2];
-                            _d = this;
-                            return [4 /*yield*/, import('swiper')];
-                        case 1:
-                            _d.swiperLibrary = _e.sent();
-                            _e.label = 2;
-                        case 2:
-                            Swiper = this.swiperLibrary.default;
-                            if (!!this.options.nxsThumbnails && this.options.nxsThumbnails.show) {
-                                thumbnailsOptions = {
-                                    slidesPerView: this.options.nxsThumbnails.perView,
-                                    loop: false,
-                                    freeMode: true,
-                                    watchSlidesVisibility: true,
-                                    watchSlidesProgress: true,
-                                    breakpoints: this.options.nxsThumbnails.breakpoints,
-                                    // spaceBetween: 10,
-                                };
-                                this.thumbnailsSliderInstance = new Swiper(this.nxsThumbnailsSliderContainer.nativeElement, thumbnailsOptions);
-                                this.options.thumbs = { swiper: this.thumbnailsSliderInstance };
-                            }
-                            this.sliderInstance = new Swiper(this.nxsSliderContainer.nativeElement, this.options);
-                            this.log('sliderInstance has been created', this.sliderInstance);
-                            this.sliderInstance.on('slideChange', function () {
-                                _this.zone.run(function () {
-                                    _this.currentSlide = _this.sliderInstance.realIndex;
-                                    _this.log("slideChange", _this.currentSlide);
-                                    _this.slideChange.next(_this.currentSlide);
-                                });
-                            });
-                            this.sliderInstance.on('click', function (evt) {
-                                var target = evt.target;
-                                if (target.className.indexOf('nxs-carousel-button') !== -1 || target.className.indexOf('swiper-pagination') !== -1)
-                                    return;
-                                _this.zone.run(function () {
-                                    _this.slideClick.next(evt);
-                                    if (_this.options.nxsfullscreenOnClick && _this.images && _this.images.length && !_this.hasHtmlContent) {
-                                        _this.showFullScreenCarousel(_this.images, 'fullscreen-carousel');
-                                    }
-                                });
-                            });
-                            this.subscribeToSlideChanged();
-                            return [2 /*return*/];
-                    }
-                });
-            }); });
-        };
         NxsCarouselComponent.prototype.goToSlide = function (index, speed) {
-            if (!this.sliderInstance)
-                return;
-            this.sliderInstance.slideTo(index, speed);
+            var _a;
+            (_a = this.swiperInstance) === null || _a === void 0 ? void 0 : _a.slideTo(index, speed);
         };
         NxsCarouselComponent.prototype.next = function () {
-            if (!this.sliderInstance)
-                return;
-            this.sliderInstance.slideNext();
+            var _a;
+            (_a = this.swiperInstance) === null || _a === void 0 ? void 0 : _a.slideNext();
         };
         NxsCarouselComponent.prototype.previous = function () {
-            if (!this.sliderInstance)
-                return;
-            this.sliderInstance.slidePrev();
+            var _a;
+            (_a = this.swiperInstance) === null || _a === void 0 ? void 0 : _a.slidePrev();
+        };
+        NxsCarouselComponent.prototype.onSwiperThumbnails = function (instance) {
+            var _a, _b;
+            if ((_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.nxsThumbnails) === null || _b === void 0 ? void 0 : _b.show)
+                this.thumbnailsSwiperInstance = instance;
+            else
+                this.thumbnailsSwiperInstance = null;
+            // if (this.options?.nxsThumbnails?.show) {
+            //     const optionsClone = MainHelpers.cloneObject(this.options);
+            //     optionsClone.thumbs = { swiper: this.thumbnailsSwiperInstance };
+            //     // this.options = optionsClone;
+            //     // this.options = { ...this.options, thumbs: { swiper: this.thumbnailsSwiperInstance } };
+            //     console.log("Log ~ file: nxs-carousel.component.ts ~ line 416 ~ NxsCarouselComponent ~ onSwiperThumbnails ~    this.options ", this.options);
+            //     this.options.thumbs = { swiper: this.thumbnailsSwiperInstance };
+            // }
+        };
+        NxsCarouselComponent.prototype.onSwiper = function (instance) {
+            var _this = this;
+            this.log('swiper ready - instance', instance);
+            this.swiperInstance = instance;
+            this.swiperInstance.on('click', function (swiperInstance, evt) {
+                // console.log("Log ~ file: nxs-carousel.component.ts ~ line 392 ~ NxsCarouselComponent ~ this.swiperInstance.on ~ evt", evt);
+                var target = evt.target;
+                if (target.className.indexOf('nxs-carousel-button') !== -1 || target.className.indexOf('swiper-pagination') !== -1)
+                    return;
+                _this.runInZone(function () {
+                    _this.slideClick.next(evt);
+                    if (_this.options.nxsfullscreenOnClick && _this.images && _this.images.length && !_this.hasHtmlContent) {
+                        _this.showFullScreenCarousel(_this.images, 'fullscreen-carousel');
+                    }
+                });
+            });
+        };
+        NxsCarouselComponent.prototype.runInZone = function (callback) {
+            var args = [];
+            for (var _i = 1; _i < arguments.length; _i++) {
+                args[_i - 1] = arguments[_i];
+            }
+            if (!this.zone) {
+                callback(args);
+            }
+            return this.zone.run(function () { return callback(args); });
+        };
+        NxsCarouselComponent.prototype.onSlideChange = function (instances) {
+            var _this = this;
+            // this.swiperInstance = instance;
+            // this.log('slide change - instance', instance);
+            this.runInZone(function () {
+                var _a;
+                _this.currentSlide = ((_a = _this.swiperInstance) === null || _a === void 0 ? void 0 : _a.realIndex) || 0;
+                _this.log('slide change - currentSlide', _this.currentSlide);
+                _this.slideChange.next(_this.currentSlide);
+            });
         };
         return NxsCarouselComponent;
     }());
     NxsCarouselComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'nxs-carousel',
-                    template: "<div #nxsSliderContainer\n    \u00A0[ngClass]=\"{'swiper-container':true,'nxs-slider-with-thumbnails':!!options.nxsThumbnails && options.nxsThumbnails.show}\"\n    [style.height]=\"getMainSliderHeight()\">\n    <div class=\"swiper-wrapper\" #nxsSlidesWrapper>\n        <ng-content>\n\n        </ng-content>\n    </div>\n    <!-- (cdkObserveContent)=\"onContentChange($event)\" -->\n    <!-- If we need pagination -->\n    <div class=\"swiper-pagination nxs-carousel-pagination\"\n        [style.display]=\"slidesCount>0 && options && options.nxsShowNavigationBullets ? '':'none'\"></div>\n\n    <!-- If we need navigation buttons -->\n    <ng-container *ngIf=\"options.nxsShowNavigationArrows\">\n        <div class=\"nxs-carousel-button-prev swiper-button-prev\"></div>\n        <div class=\"nxs-carousel-button-next swiper-button-next\"></div>\n    </ng-container>\n\n    <ng-container *ngIf=\"images && options.nxsShowImagesCount\">\n        <div class=\"nxs-image-counter\">\n            {{currentSlide+1}} / {{images.length}}\n        </div>\n    </ng-container>\n\n</div>\n\n<div #nxsThumbnailsSliderContainer\n    [style.display]=\"(images && !!options.nxsThumbnails && options.nxsThumbnails.show) ?'':'none'\"\n    [style.height]=\"(!!options.nxsThumbnails && options.nxsThumbnails.show && !!options.nxsThumbnails.percentHeight) ?  (options.nxsThumbnails.percentHeight + '%'):''\"\n    [style.top]=\"(!!options.nxsThumbnails && options.nxsThumbnails.show && !!options.nxsThumbnails.percentHeight && options.nxsThumbnails.onMainSlider) ?  ('-' + (options.nxsThumbnails.percentHeight) + '%'):''\"\n    [ngClass]=\"{'swiper-container':true, 'nxs-slider-thumbnails-container':true,'nxs-slider-thumbnails-on-main-slider':options.nxsThumbnails && options.nxsThumbnails.onMainSlider}\">\n    <div class=\"swiper-wrapper\" #nxsThumbnailsSlidesWrapper>\n\n    </div>\n\n</div>",
+                    template: "<div *ngIf=\"options\"\n    [ngClass]=\"{'swiper-container':true,'nxs-slider-with-thumbnails':!!options.nxsThumbnails && options.nxsThumbnails.show}\"\n    [style.height]=\"getMainSliderHeight()\">\n    <swiper [config]=\"options\" (swiper)=\"onSwiper($event)\" (slideChange)=\"onSlideChange($event)\"\n        [thumbs]=\"{ swiper: thumbnailsSwiperInstance }\">\n        <ng-container *ngIf=\"hasHtmlContent\">\n            <ng-template *ngFor=\"let slide of contents\" swiperSlide>\n                <ng-template [ngTemplateOutlet]=\"slide\" [ngTemplateOutletContext]=\"{\n                      $implicit: slide\n                    }\"></ng-template>\n            </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!hasHtmlContent && images?.length\">\n            <ng-template swiperSlide *ngFor=\"let slideImage of images\">\n                <img class=\"nxs-image-slide swiper-lazy\" [attr.data-src]=\"slideImage.src\" />\n                <div class=\"swiper-lazy-preloader swiper-lazy-preloader-black\"></div>\n            </ng-template>\n        </ng-container>\n    </swiper>\n    <ng-container *ngIf=\"images && options.nxsShowImagesCount\">\n        <div class=\"nxs-image-counter\">\n            {{currentSlide+1}} / {{images.length}}\n        </div>\n    </ng-container>\n</div>\n\n<div *ngIf=\"thumbnailsOptions && images?.length\"\n    [style.height]=\"(!!options.nxsThumbnails && options.nxsThumbnails.show && !!options.nxsThumbnails.percentHeight) ?  (options.nxsThumbnails.percentHeight + '%'):''\"\n    [style.top]=\"(!!options.nxsThumbnails && options.nxsThumbnails.show && !!options.nxsThumbnails.percentHeight && options.nxsThumbnails.onMainSlider) ?  ('-' + (options.nxsThumbnails.percentHeight) + '%'):''\"\n    [ngClass]=\"{'swiper-container':true, 'nxs-slider-thumbnails-container':true,'nxs-slider-thumbnails-on-main-slider':options.nxsThumbnails && options.nxsThumbnails.onMainSlider}\">\n    <swiper [config]=\"thumbnailsOptions\" (swiper)=\"onSwiperThumbnails($event)\">\n        <ng-template swiperSlide *ngFor=\"let slideImage of images\">\n            <img class=\"nxs-image-slide swiper-lazy\" [attr.data-src]=\"slideImage.src\" />\n            <div class=\"swiper-lazy-preloader swiper-lazy-preloader-black\"></div>\n        </ng-template>\n    </swiper>\n</div>",
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: ["nxs-carousel{display:block;height:100%;position:relative;--swiper-navigation-color:#fff;--swiper-theme-color:#fff}nxs-carousel .swiper-container{width:100%;display:block;position:relative;height:100%}nxs-carousel .swiper-container .swiper-wrapper .swiper-slide{height:100%;position:relative;width:100%;min-height:50px;background-size:cover;background-position:50%;background-repeat:no-repeat}nxs-carousel .swiper-container.nxs-slider-with-thumbnails{height:80%}nxs-carousel .swiper-container.nxs-slider-thumbnails-container{height:20%;background:transparent;padding:6px 0}nxs-carousel .swiper-container.nxs-slider-thumbnails-container .swiper-slide{cursor:pointer;border-radius:6px;margin:0 6px;border:2px solid transparent}nxs-carousel .swiper-container.nxs-slider-thumbnails-container .swiper-slide.swiper-slide-thumb-active{border:2px solid #add8e6}nxs-carousel .swiper-container.nxs-slider-thumbnails-on-main-slider{top:-20%}nxs-carousel .nxs-image-counter{position:absolute;top:0;right:0;color:#fff;padding:4px;font-weight:700;z-index:10}"]
+                    styles: ["nxs-carousel{display:block;height:100%;position:relative;--swiper-navigation-color:#fff;--swiper-pagination-color:#fff;--swiper-theme-color:#fff}nxs-carousel .swiper-container{width:100%;height:100%;display:block;position:relative}nxs-carousel .swiper-container swiper{height:100%}nxs-carousel .swiper-container .swiper-wrapper .swiper-slide{height:100%;position:relative;width:100%;min-height:50px;background-size:cover;background-position:50%;background-repeat:no-repeat}nxs-carousel .swiper-container .nxs-image-slide{height:100%;-o-object-fit:cover;object-fit:cover;width:100%;-o-object-position:center;object-position:center}nxs-carousel .swiper-container.nxs-slider-with-thumbnails{height:80%}nxs-carousel .swiper-container.nxs-slider-thumbnails-container{height:20%;background:transparent;padding:6px 0}nxs-carousel .swiper-container.nxs-slider-thumbnails-container .swiper-slide{cursor:pointer;border-radius:6px;margin:0 6px;border:2px solid transparent}nxs-carousel .swiper-container.nxs-slider-thumbnails-container .swiper-slide.swiper-slide-thumb-active{border:2px solid #add8e6}nxs-carousel .swiper-container.nxs-slider-thumbnails-on-main-slider{top:-20%}nxs-carousel .nxs-image-counter{position:absolute;top:0;right:0;color:#fff;padding:4px;font-weight:700;z-index:10}"]
                 },] }
     ];
     NxsCarouselComponent.ctorParameters = function () { return [
@@ -721,12 +610,11 @@
         { type: NxsCarouselModuleConfig, decorators: [{ type: core.Optional }] }
     ]; };
     NxsCarouselComponent.propDecorators = {
-        nxsSliderContainer: [{ type: core.ViewChild, args: ['nxsSliderContainer', { static: true },] }],
-        nxsSlidesWrapper: [{ type: core.ViewChild, args: ['nxsSlidesWrapper', { static: true },] }],
-        nxsThumbnailsSliderContainer: [{ type: core.ViewChild, args: ['nxsThumbnailsSliderContainer', { static: true },] }],
-        nxsThumbnailsSlidesWrapper: [{ type: core.ViewChild, args: ['nxsThumbnailsSlidesWrapper', { static: true },] }],
+        contents: [{ type: core.ContentChildren, args: [NxsSwiperTemplateDirective, { read: core.TemplateRef },] }],
+        swiperComponent: [{ type: core.ViewChild, args: ['swiper', { static: false },] }],
+        lazy: [{ type: core.Input }],
+        images: [{ type: core.Input }],
         setOptions: [{ type: core.Input, args: ['options',] }],
-        setImages: [{ type: core.Input, args: ['images',] }],
         hasHtmlContent: [{ type: core.Input }],
         slideChange: [{ type: core.Output }],
         slideClick: [{ type: core.Output }]
@@ -750,16 +638,18 @@
                     declarations: [
                         NxsCarouselComponent,
                         NxsCarouselDialogComponent,
+                        NxsSwiperTemplateDirective,
                     ],
                     imports: [
                         common.CommonModule,
                         icon.MatIconModule,
                         button.MatButtonModule,
                         dialog.MatDialogModule,
-                        observers.ObserversModule,
+                        angular.SwiperModule,
                     ],
                     exports: [
                         NxsCarouselComponent,
+                        NxsSwiperTemplateDirective,
                     ],
                 },] }
     ];
@@ -771,7 +661,8 @@
     exports.NxsCarouselComponent = NxsCarouselComponent;
     exports.NxsCarouselModule = NxsCarouselModule;
     exports.NxsCarouselModuleConfig = NxsCarouselModuleConfig;
-    exports.ɵa = NxsCarouselDialogComponent;
+    exports.ɵa = NxsSwiperTemplateDirective;
+    exports.ɵb = NxsCarouselDialogComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });