How to use the tiny-slider/src/tiny-slider.module.tns function in tiny-slider

To help you get started, we’ve selected a few tiny-slider examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github shopware / platform / src / Storefront / Resources / asset / script / page / product-detail / gallery-slider.page.js View on Github external
_init() {
        tns({
            container: '#gallery',
            items: 1,
            mode: 'gallery',
            navContainer: '#customize-thumbnails',
            navAsThumbnails: true,
            autoHeight: true
        });
    }
github shopware / platform / src / Storefront / Resources / app / storefront / src / plugin / slider / base-slider.plugin.js View on Github external
_initSlider() {
        this.el.classList.add(this.options.initializedCls);

        const container = this.el.querySelector(this.options.containerSelector);
        const controlsContainer = this.el.querySelector(this.options.controlsSelector);
        const onInit = () => {
            PluginManager.initializePlugins();

            this.$emitter.publish('initSlider');
        };

        if (container) {
            if (this._sliderSettings.enabled) {
                container.style.display = '';
                this._slider = tns({
                    container,
                    controlsContainer,
                    onInit,
                    ...this._sliderSettings,
                });
            } else {
                container.style.display = 'none';
            }
        }

        this.$emitter.publish('afterInitSlider');
    }
github shopware / platform / src / Storefront / Resources / src / script / plugin / slider / gallery-slider.plugin.js View on Github external
}
        }

        if (navContainer) {
            const thumbnailControls = this.el.querySelector(this.options.thumbnailControlsSelector);

            const onInitThumbnails = () => {
                this._initDots();

                this.$emitter.publish('initThumbnailSlider');
            };

            if (this._thumbnailSliderSettings.enabled) {
                navContainer.style.display = '';

                this._thumbnailSlider = tns({
                    container: navContainer,
                    controlsContainer: thumbnailControls,
                    onInit: onInitThumbnails,
                    ...this._thumbnailSliderSettings,
                });
            } else {
                navContainer.style.display = 'none';
            }
        }

        this.$emitter.publish('afterInitSlider');
    }
}
github shopware / platform / src / Storefront / Resources / src / script / plugin / slider / base-slider.plugin.js View on Github external
_initSlider() {
        this.el.classList.add(this.options.initializedCls);

        const container = this.el.querySelector(this.options.containerSelector);
        const controlsContainer = this.el.querySelector(this.options.controlsSelector);
        const onInit = () => {
            PluginManager.initializePlugins();

            this.$emitter.publish('initSlider');
        };

        if (container) {
            if (this._sliderSettings.enabled) {
                container.style.display = '';
                this._slider = tns({
                    container,
                    controlsContainer,
                    onInit,
                    ...this._sliderSettings,
                });
            } else {
                container.style.display = 'none';
            }
        }

        this.$emitter.publish('afterInitSlider');
    }
github shopware / platform / src / Storefront / Resources / src / script / plugin / slider / gallery-slider.plugin.js View on Github external
const container = this.el.querySelector(this.options.containerSelector);
        const navContainer = this.el.querySelector(this.options.thumbnailsSelector);
        const controlsContainer = this.el.querySelector(this.options.controlsSelector);

        if (container) {
            const onInit = () => {
                PluginManager.initializePlugin('Magnifier', '[data-magnifier]');
                PluginManager.initializePlugin('ZoomModal', '[data-zoom-modal]');

                this.$emitter.publish('initGallerySlider');
            };

            if (this._sliderSettings.enabled) {
                container.style.display = '';

                this._slider = tns({
                    container,
                    controlsContainer,
                    navContainer,
                    onInit,
                    ...this._sliderSettings,
                });
            } else {
                container.style.display = 'none';
            }
        }

        if (navContainer) {
            const thumbnailControls = this.el.querySelector(this.options.thumbnailControlsSelector);

            const onInitThumbnails = () => {
                this._initDots();

tiny-slider

Vanilla javascript slider for all purposes, inspired by Owl Carousel.

MIT
Latest version published 3 years ago

Package Health Score

58 / 100
Full package analysis

Similar packages