Como hacer un slideshow para un sitio web

0

0

Share on Pinterest

0

0

Comparte con tus amigos

Tu nombre

Tu e-mail

E-mail del destinatario

Enter a Message
Leí este artículo y me pareció muy interesante, pensé que te podría gustar. El artículo se llama Como hacer un slideshow para un sitio web te comparto el link https://www.falconmasters.com/tutoriales/como-hacer-slideshow/.

Captcha

Enviar

Uno de los elementos mas utilizados en sitios web de productos son los Sliders, mejor conocidos como Slideshows, que como quizás ya sabrás son contenedores de imágenes que cambian de 1 en 1 cada cierto tiempo.

Hoy vamos aprender como hacer un slideshow e implementarlo en nuestros sitios web, esto lo haremos con HTML, CSS y un poco de Javascript.

Demo del Slideshow: http://falconmasters.com/demos/slideshow/

Como hacer un slideshow para un sitio web con HTML, CSS y JS

Estructura de nuestro Slideshow:

	<div class="main">
		<div class="slides">
			<img src="http://lorempixel.com/1600/900/city/1" alt="">
			<img src="http://lorempixel.com/1600/900/city/2" alt="">
			<img src="http://lorempixel.com/1600/900/city/3" alt="">
		</div>
	</div>

Código CSS:

* {
	margin:0;
	padding:0;
}

body {
	background:#f2f2f2;
}

.main {
	width:90%;
	max-width:1000px;
	margin:20px auto;
}

.slides {
	width:100%;
}

.slides img {
	width:100%;
}

.slidesjs-pagination {
	background:#424242;
	list-style:none;
	overflow:hidden;
}

.slidesjs-pagination li {
	float:left;
}

.slidesjs-pagination li a {
	display:block;
	padding:10px 20px;
	color:#fff;
	text-decoration:none;
}

.slidesjs-pagination li a:hover {
	background:#000;
}

.slides .active {
	background:#000;
}

.slidesjs-navigation{
	background:#000;
	color:#fff;
	text-decoration:none;
	display:inline-block;
	padding:13.5px 20px;
	float:right;
}

Código Javascript (Recuerda ponerlo al final de tu documento, antes de </body>)

	<script>

	$(function(){
  $(".slides").slidesjs({
    play: {
      active: true,
        // [boolean] Generate the play and stop buttons.
        // You cannot use your own buttons. Sorry.
      effect: "slide",
        // [string] Can be either "slide" or "fade".
      interval: 3000,
        // [number] Time spent on each slide in milliseconds.
      auto: true,
        // [boolean] Start playing the slideshow on load.
      swap: true,
        // [boolean] show/hide stop and play buttons
      pauseOnHover: false,
        // [boolean] pause a playing slideshow on hover
      restartDelay: 2500
        // [number] restart delay on inactive slideshow
    }
  });
});

	</script>

Para solucionar el problema de los botones cambiados:

Para poder acomodar los botones correctamente vamos a seguir trabajando en nuestro archivo jquery.slides.js y vamos a modificar las siguientes lineas de la siguiente manera:

Linea 118

"class": "slidesjs-next slidesjs-navigation",

Linea 124

 "class": "slidesjs-previous slidesjs-navigation",

Lo unico que hacemos es en realidad cambiarlas una por otra, después de esto ya nada mas agregamos nuestras clases del icono.

Recursos Utilizados:

SlideJS: http://www.slidesjs.com/

IcoMoon: http://icomoon.io/app/

Jquery: http://code.jquery.com/jquery-1.9.1.min.js

Comprimir el peso de tus imágenes para slideshow

0

0

Share on Pinterest

0

0

Comparte con tus amigos

Tu nombre

Tu e-mail

E-mail del destinatario

Enter a Message
Leí este artículo y me pareció muy interesante, pensé que te podría gustar. El artículo se llama Como hacer un slideshow para un sitio web te comparto el link https://www.falconmasters.com/tutoriales/como-hacer-slideshow/.

Captcha

Enviar