Slider CSS3 no me deja clickear y problema con ultimo slide

[yessenines]

Hola, qué tal a todos.

Estoy haciendo un sitio (ahora está en 1600px pero lo voy a hacer responsive):
http://184.107.61.9/~melisama/nuevo-sitio/

Hay algunas cosas del slider que no puedo resolver.

Quisiera poder hacer que el botón "Ver más>>" (que entra de arriba a abajo mediante @keyframes) que se pueda clickear para colocarle un link.

Se trata de una etiqueta <figcaption> y no se puede clickear aunque le coloque el link dentro de la etiqueta o que lo colocque al revés (el <figcaption> dentro del <a> tampoco me permite clickear).
Al final incluí el <figcaption> y el <figure> dentro de un <a></a> pero tampoco me deja clickear las imágenes del banner así que estoy en la misma...

Creo que la causa está en la animación por css, quisiera saber si alguno que sepa me puede confirmar eso o cómo puedo incluir contenido diferente en cada banner/slide y que sea clickeable sin utilizar javascript o jquery.



Por otro lado, cuando dejo que el slider se reproduzca solo (arriba a la derecha está el play y pause), no muestra la última imagen/slide. Mientras que si tomo el control con las flechas sí la muestra (es el fondo tipo piedra).
¿Por qué puede ser que suceda eso?

Gracias!!

[pzin]

A mi me funciona el enlace tal como lo tienes puesto.

[yessenines]

Hola Bonez,

Mientras se reproduce automáticamente, el link funciona sólo cuando se muestra el slider 1 y el slider 3. Y además el último slider no se muestra (es esta imagen: http://184.107.61.9/~melisama/nuevo-sitio/img/dummy-640x310-4.jpg )

Cuando detienes el slider o clickeas en cualquiera de las flechas, en ese caso deja de funcionar la animación para el botón "ver más>>" quedando visible el último botón mostrado, fijo. También es grave que no se anima el botón junto con el slide, ya que cada slide debe tener su link propio distinto de los demás y si queda siempre el mismo fijo parecerá que todos tienen el mismo botón e irán todos al mismo link.

Por ejemplo, si clickeas la flecha derecha mientras se muestra el 2do slide, al pasar al tercero verás que sigue diciendo Ver más >> 2 (cuando en el 3ero debería decir Ver más >> 3)

Gracias

[pzin]

Sinceramente me resulta demasiado complejo hacerme un hueco en ese cacao de código fuente. Tienes una parte del CSS por un lado en un archivo y un montón de CSS embebido en el HTML, cosas que deberían de estar en el head están por ahí desperdigadas, plugin por aquí plugin por allá... Es un caos descomunal.

[yessenines]

Bonez, lo voy a corregir, es xq aún está en proceso. Pero de todas formas el CSS del slider está todo junto en un archivo styles.css en la misma ubicación que el index.html los demás estilos son de la parte inferior al banner (SOLUCIONES, PRODUCTOS, SERVICIOS, NOSOTROS..), pero del banner es sólo este código (el resto que puede tener estilos en el html no son del slider, lo puedo borrar y volver a pasarlo):


<div id="banner">
<span id="sl_play" class="sl_command">&nbsp;</span>
<span id="sl_pause" class="sl_command">&nbsp;</span>
<span id="sl_i1" class="sl_command sl_i">&nbsp;</span>
<span id="sl_i2" class="sl_command sl_i">&nbsp;</span>
<span id="sl_i3" class="sl_command sl_i">&nbsp;</span>
<span id="sl_i4" class="sl_command sl_i">&nbsp;</span>


<section id="slideshow">

<a class="commands prev commands1" href="#sl_i4" title="&Uacute;ltima Promo">&nbsp;</a>
<a class="commands next commands1" href="#sl_i2" title="Promo 2">&nbsp;</a>
<a class="commands prev commands2" href="#sl_i1" title="Promo 1">&nbsp;</a>
<a class="commands next commands2" href="#sl_i3" title="Promo 3">&nbsp;</a>
<a class="commands prev commands3" href="#sl_i2" title="Promo 2">&nbsp;</a>
<a class="commands next commands3" href="#sl_i4" title="Promo 4">&nbsp;</a>
<a class="commands prev commands4" href="#sl_i3" title="Promo 3">&nbsp;</a>
<a class="commands next commands4" href="#sl_i1" title="Volver a Promo 1">&nbsp;</a>

<a class="play_commands pause" href="#sl_pause" title="Maintain paused">Pause</a>
<a class="play_commands play" href="#sl_play" title="Play the animation">Play</a>

<div class="container">
<div class="c_slider"></div>
<div class="slider">
<a href="http://www.google.com" ><figure>
<img src="img/dummy-640x310-1.jpg" alt="" width="1600" height="553" />
<figcaption>
Ver m&aacute;s &gt;&gt;
</figcaption>
</figure></a><!--
--><figure>
<a href="http://www.google.com" ><img src="img/dummy-640x310-2.jpg" alt="" width="1600" height="553" />
<figcaption>Ver m&aacute;s &gt;&gt; 2</figcaption>
</figure></a><!--
--><a href="http://www.google.com" ><figure>
<img src="img/dummy-640x310-3.jpg" alt="" width="1600" height="553" />
<figcaption>Ver m&aacute;s &gt;&gt; 3</figcaption>
</figure></a><!--
--><a href="http://www.google.com" ><figure>
<img src="img/dummy-640x310-4.jpg" alt="" width="1600" height="553" />
<figcaption>Ver m&aacute;s &gt;&gt; 4</figcaption>
</figure></a>
</div>
</div>

<span id="timeline"></span>
<div class="dots_commands">
<ul class="dots_commandsUl"><!--
--><li><a title="Promo 1" href="#sl_i1">Slide 1</a></li><!--
--><li><a title="Promo 2" href="#sl_i2">Slide 2</a></li><!--
--><li><a title="Promo 3" href="#sl_i3">Slide 3</a></li><!--
--><li><a title="Promo 4" href="#sl_i4">Slide 4</a></li>
</ul>
</div>

</section>

</div>




Luego los plugins son sólo para los navegadores (los resets de boilerplate y modernizr, etc), porque la voy a hacer responsive (adaptable a celulares) pero x ahora no los está usando. No los coloco en el head xq así lo recomiendan por el SEO. Los voy a quitar también para facilitar la lectura del código al igual que todo lo que no es parte del slider. Las animaciones son por CSS, a exceptuar la que hace que se baje la página cuando clickeas en las opciones del menú "Conozcanos!" que esas si tienen un smoothscroll.js pero los javascript están todos dentro de la carpeta js, no hay sueltos.


Limpio y ordeno todo lo que no es del slider y lo vuelvo a subir. Gracias!