Hola gente, estoy usando
este plugin para manejar unos sliders en un proyecto que estamos terminando. El asunto es que funciona bien en dos de los lugares que lo uso, pero en un tercero no hace nada.
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 originalvar 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<div id="idx-tabs" class="nav-tabs index-tabs"> <div class="tabs-wrapper tabs-slide-wrapper"> </div><!-- .tabs-wrapper --> <div class="tabs-control">
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