136 lines
5.5 KiB
JavaScript
136 lines
5.5 KiB
JavaScript
/**
|
|
* Please read the terms of the CLUF license attached to this module(cf "licences" folder)
|
|
*
|
|
* @author Línea Gráfica E.C.E. S.L.
|
|
* @copyright Lineagrafica.es - Línea Gráfica E.C.E. S.L. all rights reserved.
|
|
* @license https://www.lineagrafica.es/licenses/license_en.pdf https://www.lineagrafica.es/licenses/license_es.pdf https://www.lineagrafica.es/licenses/license_fr.pdf
|
|
*/
|
|
|
|
(function ($) {
|
|
$.fn.extend({
|
|
lgslider: function (params) {
|
|
// Atributos principales
|
|
let slider = $(this);
|
|
let wrapper = $('<div></div>');
|
|
let clonedWrapper;
|
|
let inAnimation = false;
|
|
|
|
// Llamada a funciones inicializadoras
|
|
init();
|
|
generateWrapper();
|
|
generateSlides();
|
|
generateNavigation();
|
|
autoAnimate();
|
|
|
|
// Inicializa el plugin
|
|
function init() {
|
|
params.numItems = $('.slide', slider).size();
|
|
params.sliderWidth = slider.width();
|
|
params.itemWidth = parseInt(params.sliderWidth / params.displayItems);
|
|
params.wrapperWidth = params.itemWidth * params.numItems;
|
|
}
|
|
|
|
// Genera el contenedor de sliders
|
|
function generateWrapper() {
|
|
wrapper.addClass('lg-wrapper');
|
|
wrapper.css('width', params.wrapperWidth + 'px');
|
|
slider.prepend(wrapper);
|
|
}
|
|
|
|
// Inicializa cada slide
|
|
function generateSlides() {
|
|
$('.slide', slider).each(function () {
|
|
wrapper.append($(this));
|
|
$(this).css('width', params.itemWidth + 'px');
|
|
});
|
|
clonedWrapper = wrapper.clone().css('display', 'none').css('left', params.sliderWidth + 'px');
|
|
slider.append(clonedWrapper);
|
|
slider.css('height', (wrapper.outerHeight() + 100) + 'px');
|
|
}
|
|
|
|
// Genera los botones de navegacion
|
|
function generateNavigation() {
|
|
slider.append(
|
|
$('<div></div>')
|
|
.addClass('lg-button-container')
|
|
.append(
|
|
$('<span></span>').addClass('lg-previous')
|
|
)
|
|
.append(
|
|
$('<span></span>').addClass('lg-next')
|
|
)
|
|
);
|
|
|
|
// Click event next
|
|
$(document).on('click', '.lg-next', function () {
|
|
goTo('next');
|
|
});
|
|
|
|
// Click event previous
|
|
$(document).on('click', '.lg-previous', function () {
|
|
goTo('previous');
|
|
});
|
|
}
|
|
|
|
// Permite el desplazamiento
|
|
function goTo(direction) {
|
|
if(!inAnimation) {
|
|
let step = params.step * params.itemWidth;
|
|
let leftW1 = parseInt(wrapper.css('left')) + ((direction !== 'previous') ? -step : step);
|
|
let leftW2 = parseInt(clonedWrapper.css('left')) + ((direction !== 'previous') ? -step : step);
|
|
let w1Offset = leftW1 + params.wrapperWidth;
|
|
let w2Offset = leftW2 + params.wrapperWidth;
|
|
|
|
if(direction !== 'previous') {
|
|
// TODO: Se le suma 3 porque el calculo no es exacto (tiene una desviacion de 3px)
|
|
if((w1Offset + 3) === params.sliderWidth) {
|
|
leftW2 = params.sliderWidth - 3;
|
|
clonedWrapper.css('display', 'none');
|
|
clonedWrapper.css('left', leftW2 + 'px');
|
|
clonedWrapper.css('display', 'block');
|
|
}
|
|
if((w2Offset + 3) === params.sliderWidth) {
|
|
leftW1 = params.sliderWidth - 3;
|
|
wrapper.css('display', 'none');
|
|
wrapper.css('left', leftW1 + 'px');
|
|
wrapper.css('display', 'block');
|
|
}
|
|
} else {
|
|
if(leftW1 === 0) {
|
|
leftW2 = -params.wrapperWidth;
|
|
clonedWrapper.css('display', 'none');
|
|
clonedWrapper.css('left', leftW2 + 'px');
|
|
clonedWrapper.css('display', 'block');
|
|
}
|
|
if(leftW2 === 0) {
|
|
leftW1 = -params.wrapperWidth;
|
|
wrapper.css('display', 'none');
|
|
wrapper.css('left', leftW1 + 'px');
|
|
wrapper.css('display', 'block');
|
|
}
|
|
}
|
|
|
|
inAnimation = true;
|
|
|
|
wrapper.animate({
|
|
'left': leftW1
|
|
}, params.transition, function () {
|
|
inAnimation = false;
|
|
});
|
|
|
|
clonedWrapper.animate({
|
|
'left': leftW2
|
|
}, params.transition, function () {
|
|
inAnimation = false;
|
|
});
|
|
}
|
|
}
|
|
|
|
function autoAnimate() {
|
|
if(params.autoplay === true) {
|
|
setInterval(function(){goTo('next')}, params.delay);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}(jQuery)); |