Tengo hecho en PHP un carrusel de imágenes. Salen las ímagenes, y a ambos lados, unas flechas para mover las imágenes a cada dirección (tengo 12 imagenes y sale 4)
Las imagenes que aparecen nada mas cargar la web son la 1,2,3 y 4.
Ahora querría que al cargar mi web, apareciese primero las imagenes de la posición 5,6,7 y 8
Tengo implementado el siguiente código:
Código PHP:
<div class="carrousel" data-pos="5">
<a href="javascript:;" class="carrousel_ini"></a>
<a href="javascript:;" class="carrousel_left"></a>
<div class="carrousel_inner">
<ul>
AQUI VAN TODAS LAS IMAGENES
</div>
<a href="javascript:;" class="carrousel_right"></a>
Código PHP:
$('.carrousel_ini').ready(function(){
var position =$('.carrousel').attr('data-pos');
position=parseInt(position, 10);
elementsCount=elementsCount+12;
$('.carrousel').attr('data-pos',position);
$('.carrousel_inner').animate({'scrollLeft' : pos });
});
$('.carrousel_left').click(function(){
var elementsCount=$('carrousel_inner ul li').size();
var position =$('.carrousel').attr('data-pos');
position=parseInt(position, 10);
if (position<elementsCount)
{
position=position+1;
$('.carrousel_right').removeClass('right_inactive');
if (position==elementsCount){
$(this).addClass('left_inactive');
}
var pos=position*230;
$('.carrousel').attr('data-pos',position);
$('.carrousel_inner').animate({'scrollLeft' : pos });
}
});
$('.carrousel_right').click(function(){
var position =$('.carrousel').attr('data-pos');
var elementsCount=$('carrousel_inner ul li').size();
position=parseInt(position, 10);
if (position>0)
{
$('.carrousel_left').removeClass('left_inactive');
position=position-1;
if(position==0)
{
$(this).addClass('right_inactive');
}
var pos=position*230;
$('.carrousel').attr('data-pos',position);
$('.carrousel_inner').animate({'scrollLeft' : pos });
}
});
Lo que hace ahora es que aparecen las imagenes 1,2,3 y 4 y cuando pulsas la flecha, va directamente a las que quiero (porque el valor de data-pos no cambia hasta que pulses el botón, de ahí que haya creado una función carrousel_ini que inicialice el carrusel y lo coloque como yo quiero)
¿Alguna idea?
