Foros del Web - Ver Mensaje Individual

Jeremias · #1 (**permalink**) 10/05/2016, 09:08

Buenas
Estoy editando un Slider que consegui en internet, pero por alguna extraña razon, cuando hace la transicion la imagen y texto "saltan", y no se mantienen en su lugar.

Alguien podria decirme que puedo hacer para que la imagen se quede donde debe ir y el texto tambien al momento de la transicion.

Aqui pueden ver todo funcionando, para que vean el error:

http://jeremiasp.neocities.org/prueba/index.html

Gracias

NOTA: Disculpen si la solucion es en el Jquery, pero creo que con el css se resuelve

HTML:

Código:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Slider Basico</title>

	<!-- Fuentes de Google -->
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>

	<!-- Stylesheets -->
	<link rel="stylesheet" href="style.css">

	<!--[if lt IE 9]>
		<script src="js/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	
	<h1 class="slider-title">Slider | <a href="http://creaticode.com/blog">creaticode.com</a></h1>

	<!-- Slider Container -->
	<section class="slider-container">
		<ul id="slider" class="slider-wrapper">
			<li class="slide-current">
				<img src="images/1.jpg" alt="Slider Imagen 1">
				<div class="caption">
					<h3 class="caption-title">Diseño web</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, ea.</p>
				</div>
			</li>

			<li>
				<img src="images/2.jpg" alt="Slider Imagen 1">
				<div class="caption">
					<h3 class="caption-title">Desarrollo web</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, ea.</p>
				</div>
			</li>

			<li>
				<img src="images/3.jpg" alt="Slider Imagen 1">
				<div class="caption">
					<h3 class="caption-title">Javascript</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, ea.</p>
				</div>
			</li>

			<li>
				<img src="images/4.jpg" alt="Slider Imagen 1">
				<div class="caption">
					<h3 class="caption-title">Maquetacion</h3>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, ea.</p>
				</div>
			</li>
		</ul>

		<!-- Sombras -->
		<div class="shadow"></div>

		<!-- Controles -->
		<ul id="slider-controls" class="slider-controls"></ul>

		<!-- Autores de las Imagenes -->
		<p class="authors">Las imagenes usadas en esta demostracion no son de mi propiedad y son solamente como uso de ejemplo. <br><a href="https://www.flickr.com/photos/flickr/galleries/72157645330786244/">Autores de las imagenes</a></p>
	</section>
	
	<!-- Scripts -->
	<script src="js/jquery.min.js"></script>
	<script src="js/main.js"></script>

</body>
</html>

CSS:

Código:

/**
 * Fondo: #242c38
 * Gris Claro: #415066
 * Verde Azulado: #00c5b9
 ----------------------------------------*/
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	background: #242c38;	
	font-family: 'Roboto', Arial, Tahoma, Sans-serif, Verdana, Helvetica;
	font-size: 62.5%;
}

a {
	color: #00c5b9;
	text-decoration: none;
}

ul {
	list-style-type: none;
}

/*
Encabezado del Slider
 ----------------------------------------*/
.slider-title {
	text-align: center;
	margin: 80px 0 40px;
	font-size: 3.2em;
	font-weight: 300;
	color: #FFF;
}

/**
 * Contendor del Slider
 ----------------------------------------*/
.slider-container {
	margin: 0 auto;
	width: 800px;
}

.slider-wrapper {
	position: relative;
	z-index: 90;
	max-height: 140px;
	width: 100%;
	border: 5px solid #415066;
	overflow: hidden;
	background: rgba(0,0,0,0.6);	
}


.slider-wrapper li {
	display: none;
}

li.slide-current {
	display: block;
}

.slider-wrapper li img {
	max-width: 30%;
	height: auto;
	display: inline-block;
	float: left;
}

/**
 * Caption
 ----------------------------------------*/
.caption {
	display: inline-block;
	width: 70%;
	height: 100%;
	padding: 12px;
	float: right;
}

.caption-title {
	color: #00c5b9;
	font-weight: 700;
	font-size: 1.6em;
	margin-bottom: 10px;
}

.caption p {
	color: #FFF;
	font-size: 1.4em;
	line-height: 1.3em;
}


/**
 * Sombras
 ----------------------------------------*/
.shadow {
	width: 100%;
	height: 15px;
	position: relative;
}

.shadow:after, .shadow:before {
	content: '';
	width: 50%;
	height: 100%;
	background: #171c24;
	position: absolute;
	left: 10px;
	top: -20px;
	-webkit-transform: rotate(-4deg);
	-ms-transform: rotate(-4deg);
	-o-transform: rotate(-4deg);
	transform: rotate(-4deg);
	-webkit-box-shadow: 0 0 15px 8px #171c24;
	-moz-box-shadow: 0 0 15px 8px #171c24;
	box-shadow: 0 0 15px 8px #171c24;
}

.shadow:after {
	left: auto;
	right: 10px;
	-webkit-transform: rotate(4deg);
	-ms-transform: rotate(4deg);
	-o-transform: rotate(4deg);
	transform: rotate(4deg);
}

/**
 * Controles del Slider
 ----------------------------------------*/
.slider-controls {
	text-align: center;
	margin-top: 15px;
}

.slider-controls li {
	background: #415066;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	display: inline-block;
	height: 12px;
	width: 12px;
	margin: 0 4px;
	cursor: pointer;
}

.slider-controls li.active {
	background: #00c5b9;	
}

/**
 * Autores
 ----------------------------------------*/
.authors {
	margin-bottom: 15px;
	margin-top: 25px;
	color: #415066;
	font-size: 1.4em;
	text-align: center;
}

/**
 * Responsive
 ----------------------------------------*/
@media only screen and (max-width: 825px) {
	.slider-container {
		width: 500px;
	}

	.slider-wrapper {
		height: 260px;
	}
}

@media only screen and (max-width: 535px) {
	.slider-container {
		padding: 5px;
		width: 100%;
	}

	.slider-wrapper {
		height: 200px;
	}

	.caption {
		display: none;
	}
}

@media only screen and (max-width: 410px) {
	.slider-wrapper {
		height: 160px;
	}
}

JS:

Código:

/**
 * Titulo: Crear un slider desde 0
 * Categoria: Tutorial, Diseño web, Javascript
 * Blog: http://creaticode.com/blog/
 */
$(function() {
	var SliderModule = (function() {
		var pb = {};
		pb.el = $('#slider');
		pb.items = {
			panel: pb.el.find('li')
		}

		// Variables Necesarias
		var SliderInterval,
			currentSlider = 0,
			nextSlider = 1,
			lengthSlider = pb.items.panel.length;

		// Initialize
		pb.init = function(settings) {
			this.settings = settings || {duration: 8000} 
			var output = '';

			// Activamos nuestro slider
			SliderInit();

			for(var i = 0; i < lengthSlider; i++) {
				if (i == 0) {
					output += '<li class="active"></li>'; 
				} else {
					output += '<li></li>';
				}
			}

			// Controles del Slider
			$('#slider-controls').html(output).on('click', 'li', function (e){
				var $this = $(this);
				if (currentSlider !== $this.index()) {
					changePanel($this.index());
				};
			});
		}

		var SliderInit = function() {
			SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
		}

		pb.startSlider = function() {
			var panels = pb.items.panel,
				controls = $('#slider-controls li');

			if (nextSlider >= lengthSlider) {
				nextSlider = 0;
				currentSlider = lengthSlider-1;
			}

			// Efectos
			controls.removeClass('active').eq(nextSlider).addClass('active');
			panels.eq(currentSlider).fadeOut('slow');
			panels.eq(nextSlider).fadeIn('slow');

			// Actualizamos nuestros datos
			currentSlider = nextSlider;
			nextSlider += 1; 
		}

		// Funcion para controles del slider
		var changePanel = function(id) {
			clearInterval(SliderInterval);
			var panels = pb.items.panel,
				controls = $('#slider-controls li');

			// Comprobamos el ID
			if (id >= lengthSlider) {
				id = 0;
			} else if (id < 0) {
				id = lengthSlider-1;
			}

			// Efectos
			controls.removeClass('active').eq(id).addClass('active');
			panels.eq(currentSlider).fadeOut('slow');
			panels.eq(id).fadeIn('slow');

			// Actualizamos nuestros datos
			currentSlider = id;
			nextSlider = id+1;

			// Reactivamos el slider
			SliderInit();
		}


		return pb;
	}());
	SliderModule.init({duration: 4000});
});