I tried to called my jquery custom slider inside vuejs on created
but unfortunately it does't worked. It only works when i place the code inside on mounted
but it stopped when i leave the page and come back to same page.
Here is my code.
export default {
//This only worked on first load and never to work again on leaving the page and coming back!
mounted() {
require("./slider.js");
},
...
}
...
export default {
//This never works!
created() {
require("./slider.js");
},
...
}
The slider.js
//Star slider
(function($) {
'use strict';
var pluginName = 'slider',
defaults = {
next: '.slider-nav__next',
prev: '.slider-nav__prev',
item: '.slider__item',
dots: false,
dotClass: 'slider__dot',
autoplay: false,
autoplayTime: 3000,
};
function slider(element, options) {
this.$document = $(document);
this.$window = $(window);
this.$element = $(element);
this.options = $.extend({}, defaults, options);
this.init();
};
slider.prototype.init = function() {
this.setup();
this.attachEventHandlers();
this.update();
};
slider.prototype.setup = function(argument) {
this.$slides = this.$element.find(this.options.item);
this.count = this.$slides.length;
this.index = 0;
this.$next = $(this.options.next);
this.$prev = $(this.options.prev);
this.$canvas = $(document.createElement('div'));
this.$canvas.addClass('slider__canvas').appendTo(this.$element);
this.$slides.appendTo(this.$canvas);
this.$dots = $(this.options.dots);
this.$dots.length && this.createDots();
};
slider.prototype.createDots = function() {
var dots = [];
var dotClassName = this.options.dotClass;
this.$element.children().find('.slider__item__title').each(function(__index, el) {
var __title = $(this).text();
dots[__index] = '<div data-index="' + __index + '" class="' + dotClassName + '">' + __title + '</div>';
});
this.$dots.append(dots);
}
slider.prototype.attachEventHandlers = function() {
this.$element.on('prev.' + pluginName, this.prev.bind(this));
this.$document.on('click', this.options.prev, (function(e) {
this.$element.trigger('prev.' + pluginName);
}).bind(this));
this.$element.on('next.' + pluginName, this.next.bind(this));
this.$document.on('click', this.options.next, (function(e) {
this.$element.trigger('next.' + pluginName);
}).bind(this));
this.$element.on('update.' + pluginName, this.update.bind(this));
this.$window.on('resize load', (function(e) {
this.$element.trigger('update.' + pluginName);
}).bind(this));
this.$element.on('jump.' + pluginName, this.jump.bind(this));
this.$document.on('click', ('.' + this.options.dotClass), (function(e) {
var index = parseInt($(e.target).attr('data-index'));
this.$element.trigger('jump.' + pluginName, index);
}).bind(this));
this.$element.on('autoplay.' + pluginName, this.autoplay.bind(this));
this.$element.on('autoplayOn.' + pluginName, this.autoplayOn.bind(this));
this.$element.on('autoplayOff.' + pluginName, this.autoplayOff.bind(this));
this.$element.bind('prev.' + pluginName + ' next.' + pluginName + ' jump.' + pluginName, this.autoplay.bind(this));
this.options.autoplay && this.$element.trigger('autoplayOn.' + pluginName);
};
slider.prototype.next = function(e) {
this.index = (this.index + 1) % this.count;
this.slide();
};
slider.prototype.prev = function(e) {
this.index = Math.abs(this.index - 1 + this.count) % this.count;
this.slide();
};
slider.prototype.jump = function(e, index) {
this.index = index % this.count;
this.slide();
}
slider.prototype.autoplayOn = function(argument) {
this.options.autoplay = true;
this.$element.trigger('autoplay.' + pluginName);
};
slider.prototype.autoplayOff = function() {
this.autoplayClear();
this.options.autoplay = false;
}
slider.prototype.autoplay = function(argument) {
this.autoplayClear();
if (this.options.autoplay) {
this.autoplayId = setTimeout((function() {
this.$element.trigger('next.' + pluginName);
this.$element.trigger('autoplay.' + pluginName);
}).bind(this), this.options.autoplayTime);
}
};
slider.prototype.autoplayClear = function() {
this.autoplayId && clearTimeout(this.autoplayId);
}
slider.prototype.slide = function(index) {
undefined == index && (index = this.index);
var position = index * this.width * -1;
this.$canvas.css({
'transform': 'translate3d(' + position + 'px, 0, 0)',
});
this.updateCssClass();
};
slider.prototype.update = function() {
this.width = this.$element.width();
this.$canvas.width(this.width * this.count);
this.$slides.width(this.width);
this.slide();
};
slider.prototype.updateCssClass = function() {
this.$slides
.removeClass('x__slider-active')
.eq(this.index)
.addClass('x__slider-active');
this.$dots
.find('.' + this.options.dotClass)
.removeClass('x__slider-active')
.eq(this.index)
.addClass('x__slider-active');
}
$.fn[pluginName] = function(options) {
return this.each(function() {
!$.data(this, pluginName) && $.data(this, pluginName, new slider(this, options));
});
};
})(window.jQuery);
$('#x__slider').slider({
prev: '#x__slider-prev',
next: '#x__slider-next',
dots: '#x__slider-dots',
autoplay: true,
});
//End slider