110 lines
3.2 KiB
JavaScript
110 lines
3.2 KiB
JavaScript
/**
|
|
* HSSM Slider JavaScript
|
|
* Handles navigation and autoplay for the [hssm_slider] shortcode
|
|
* Custom classes version
|
|
*/
|
|
(function($) {
|
|
'use strict';
|
|
|
|
var HSSMSlider = function(container) {
|
|
this.$container = $(container);
|
|
this.$track = this.$container.find('.hssm-track');
|
|
this.$slides = this.$container.find('.hssm-slide');
|
|
this.slideCount = this.$slides.length;
|
|
this.currentIndex = 0;
|
|
this.autoplay = this.$container.data('autoplay') === true || this.$container.data('autoplay') === 'true';
|
|
this.interval = parseInt(this.$container.data('interval')) || 5000;
|
|
this.timer = null;
|
|
|
|
if (this.slideCount <= 1) return;
|
|
|
|
this.init();
|
|
};
|
|
|
|
HSSMSlider.prototype.init = function() {
|
|
var self = this;
|
|
|
|
// Arrows
|
|
this.$container.find('.hssm-arrow-next').on('click', function(e) {
|
|
e.preventDefault();
|
|
self.stopAutoplay();
|
|
self.next();
|
|
self.startAutoplay();
|
|
});
|
|
|
|
this.$container.find('.hssm-arrow-prev').on('click', function(e) {
|
|
e.preventDefault();
|
|
self.stopAutoplay();
|
|
self.prev();
|
|
self.startAutoplay();
|
|
});
|
|
|
|
// Touch swipe support
|
|
var touchStartX = 0;
|
|
var touchStartY = 0;
|
|
|
|
this.$container.on('touchstart', function(e) {
|
|
touchStartX = e.originalEvent.touches[0].pageX;
|
|
touchStartY = e.originalEvent.touches[0].pageY;
|
|
});
|
|
|
|
this.$container.on('touchend', function(e) {
|
|
var touchEndX = e.originalEvent.changedTouches[0].pageX;
|
|
var touchEndY = e.originalEvent.changedTouches[0].pageY;
|
|
|
|
// Calculate distance
|
|
var dx = touchStartX - touchEndX;
|
|
var dy = touchStartY - touchEndY;
|
|
|
|
// Only swipe if horizontal movement is greater than vertical (prevents swipe on scroll)
|
|
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50) {
|
|
if (dx > 0) {
|
|
self.next();
|
|
} else {
|
|
self.prev();
|
|
}
|
|
self.stopAutoplay();
|
|
self.startAutoplay();
|
|
}
|
|
});
|
|
|
|
this.startAutoplay();
|
|
};
|
|
|
|
HSSMSlider.prototype.update = function() {
|
|
var offset = -this.currentIndex * 100;
|
|
this.$track.css('transform', 'translateX(' + offset + '%)');
|
|
};
|
|
|
|
HSSMSlider.prototype.next = function() {
|
|
this.currentIndex = (this.currentIndex + 1) % this.slideCount;
|
|
this.update();
|
|
};
|
|
|
|
HSSMSlider.prototype.prev = function() {
|
|
this.currentIndex = (this.currentIndex - 1 + this.slideCount) % this.slideCount;
|
|
this.update();
|
|
};
|
|
|
|
HSSMSlider.prototype.startAutoplay = function() {
|
|
if (!this.autoplay) return;
|
|
var self = this;
|
|
this.timer = setInterval(function() {
|
|
self.next();
|
|
}, this.interval);
|
|
};
|
|
|
|
HSSMSlider.prototype.stopAutoplay = function() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
}
|
|
};
|
|
|
|
$(document).ready(function() {
|
|
$('.hssm-slider-container').each(function() {
|
|
new HSSMSlider(this);
|
|
});
|
|
});
|
|
|
|
})(jQuery);
|