Cómo crear un slideshow sencillo con CSS y HTML

[Angar]

Quisiera crear un sencillo slideshow con CSS y luego llamarlo con html en mi entrada.
Desde ya gracias.

 

[nxovoix]

Que slideshow quieres agregar... pasame el link y te ayudo :encouragement:

 

[Angar]

Que slideshow quieres agregar... pasame el link y te ayudo :encouragement:

Gracias por la ayuda.
Algo como esto http://i.imgur.com/niN0OoG.jpg
Pero si es posible en lugar de las flechas un texto.

 

[nxovoix]

ok :3 dame un rato y te hago un tuto aca de como ponerlo

para que puedas ir dandote una idea estara basado en este slideshow: Skitter - Slideshow for anytime!

---------- Post agregado el 24-abr-2014 hora: 05:35 ----------

Perdon por la demora 🙄

Bueno lo primero que debes hacer es ir al editor de tu plantilla y justo antes de </head> pegar esto:

	<link href="http://www.skitter-slider.net/css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
	<script type="text/javascript" language="javascript" src="http://www.skitter-slider.net/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" language="javascript" src="http://www.skitter-slider.net/js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" language="javascript" src="http://www.skitter-slider.net/js/jquery.animate-colors-min.js"></script>
	<script type="text/javascript" language="javascript" src="http://www.skitter-slider.net/js/jquery.skitter.min.js"></script>


<script type="text/javascript" language="javascript">
		$(document).ready(function() {
			$('.box_skitter_large').skitter({
				theme: 'clean',
				numbers_align: 'center',
				progressbar: true, 
				dots: true, 
				preview: true
			});
		});
	</script>

Ahora para poner el slideshow en una entrada solo debes ir a tu entrada y ponerlo en editor HTML y pegar esto en la parte de donde deber ir tu entrada:

<div id="content">
   <div class="border_box">
    <div class="box_skitter box_skitter_large">
     <ul>
      <li><a href="#cube"><img src="http://edicionrural.com/upload/images/publicaciones/5318ccb609143Campo2.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
      <li><a href="#cubeRandom"><img src="http://3.bp.blogspot.com/-oN2YSTVTNYE/T8gWO27FOMI/AAAAAAAA6AM/JabmkphSgL0/s1600/casita-de-campo-en-los-verdes-prados-naturales.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
      <li><a href="#block"><img src="http://3.bp.blogspot.com/-ZQoRVWlncjA/TpD4RX-v3JI/AAAAAAAAmWk/xJ-8oD2VodQ/s1600/caballos-en-el-campo-horses-field-1920x1200-wallpaper.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
      <li><a href="#cubeStop"><img src="http://www.forodefotos.com/attachments/casas-rurales/10579d1267735317-fotos-de-casas-de-campo-casa-de-campo.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li> 
     </ul>
    </div>
   </div>
  </div>

REMPLAZA LAS IMAGENES POR TUS IMAGENES Y LISTO

**NOTA:

si quieres editar los CSS para que vaya mejor con tu plantilla, descargas este archivo ( http://www.skitter-slider.net/css/skitter.styles.css ) Editas todo lo que tengas que editar y lo subes a un host para archivos, te recomiendo GoogleSites ( https://sites.google.com ).. una vez editado remplazas esta linea:

<link href="http://www.skitter-slider.net/css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />

por esta:

<link href="URL-DEL-ARCHIVO/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />

Espero te ayude 🙂 y una vez mas sorry por la demora :encouragement::encouragement:

AQUI DEMO DE COMO QUEDA: Demos Demos Demos Demos 😀: DEMO SLIDESHOW

 

[Angar]

Muchas gracias, quedo genial.

Sera posible como le dije reemplazar las flechas por un texto o en lugar de la imagen un video desde un link de youtube?
Lo que quisiera hacer es crear un slideshow pero con 2 videos, el primer video de tutorial y el otro de un preview o trailer.

Si puediera ayudarme con eso, se lo agradeceria muchisimo.
Y por la demora no se preocupe.