/** * 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 = $('
'); 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( $('
') .addClass('lg-button-container') .append( $('').addClass('lg-previous') ) .append( $('').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));