How to use tiny-slider - 6 common examples

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 viktorlarsson / vue-tiny-slider / src / index.js View on Github external
mouseDrag: this.mouseDrag,
				nested: this.nested,
				freezable: this.freezable,
				disable: this.disable,
				onInit: this.onInit,
				swipeAngle: this.swipeAngle,
				startIndex: this.startIndex,
				center: this.center,
				lazyLoadSelector: this.lazyLoadSelector,
				preventActionWhenRunning: this.preventActionWhenRunning,
        preventScrollOnTouch: this.preventScrollOnTouch,
        autoWidth: this.autoWidth
			}
			removeUndefinedProps(settings);

			this.slider = tns(settings);

			// Emit init event
			this.$emit('init');
			// Subscribe to all kind of tiny-slider events
			this.$_vueTinySlider_subscribeToAll();
		},
	},
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 2 years ago

Package Health Score

58 / 100
Full package analysis

Similar packages