La configuración no es muy complicada, tiene varios parámetros que he puesto bien, al menos eso creo:
Aquí defino las clases que manejan los botones Anterior y Siguiente
Código Javascript:
Ver original
var tab_buttons = { previous:$('#idx-tabs .tab-prev'), next:$('#idx-tabs .tab-next') };
Aquí las clases que manejan el contenido: wrapperSelector es el selector que contiene toda la caja, navOuterSelector y navItemsSelector no existen, pero en otro contexto no los ponía y tenía algunos problemas, luego todo se arregló, en este caso estén o no no funciona el slider:
Código Javascript:
Ver original
$('#idx-tabs').lofJSidernews({ wrapperSelector: '.tabs-slide-wrapper', navOuterSelector: '.tabs-nav-wrapper', navItemsSelector: '.tabs-nav-wrapper li', buttons: tab_buttons });
En general todo el código que maneja los tres sliders es el siguiente:
Código Javascript:
Ver original
$(document).ready( function(){ /** Recursos Gratuitos Tabs Slider */ var tab_buttons = { previous:$('#idx-tabs .tab-prev'), next:$('#idx-tabs .tab-next') }; $('#idx-tabs').lofJSidernews({ duration: 1200, interval: 5000, auto: true, mainWidth: 530, mainHeight: 40, wrapperSelector: '.tabs-slide-wrapper', navOuterSelector: '.tabs-nav-wrapper', navItemsSelector: '.tabs-nav-wrapper li', buttons: tab_buttons }); /** Widget One slider */ var widget_buttons = { previous:$('#widget-one-wrapper .widget-prev'), next:$('#widget-one-wrapper .widget-next') }; $('#widget-one-wrapper').lofJSidernews({ duration: 1200, interval: 5000, auto: true, mainWidth: 308, mainHeight: 250, navigatorWidth: 60, navigatorHeight: 35, maxItemDisplay: 5, navPosition: 'horizontal', wrapperSelector: '.widget-one-wrap-inner', navOuterSelector: '.widget-one-nav-wrapper', navItemsSelector: '.widget-one-nav-wrap-inner li', buttons: widget_buttons }); /** Header Slider */ var slide_buttons = { previous:$('#slider-wrapper .carousel-prev'), next:$('#slider-wrapper .carousel-next') }; $('#slider-wrapper').lofJSidernews({ duration: 1200, interval: 5000, auto: true, mainWidth: 590, mainHeight: 230, navigatorWidth: 400, navigatorHeight: 90, maxItemDisplay: 3, wrapperSelector: '.sliders-inner-wrapper', navOuterSelector: '.slider-nav-wrapper', navItemsSelector: '.slider-nav-wrapper-inner li', buttons: slide_buttons }); });
El código html que tengo es algo como esto:
Código HTML:
Ver original
El plugin lo que hace es que le asigna a la clase .tabs-slide-wrapper un left:0, que debería cambiar a -Npx a medida que camina el slider, al que luego le tengo que asignar un position:absolute con respecto a su contenedor, hasta ahí todo OK, pero al usar los botones no funcionan, tampoco cambiando el parámetro auto: true/false
Pueden ver aquí los tres sliders en cuestión, el del problema es el de las tabs en Recursos Gratuitos http://ceformat.s4w.biz/index/recursos-gratuitos
Muchas gracias de antemano