Control deslizante Iniciar/Detener | Programar Plus

Hace un tiempo hice un tutorial sobre un control deslizante de contenido destacado. Estaba limpio, pero un poco limitado en la posibilidad de personalización. Las dos funciones más solicitadas eran poder agregar/eliminar “paneles” y un botón de inicio/detención.

Me complace decir que pude acomodarme un poco con este nuevo control deslizante. No es un complemento, por lo que no es tan fácil como podría ser, pero es mucho más fácil. Hay una sección al final para personalizar. El control deslizante cuenta con un botón de parada/inicio y la animación va un poco más allá de simplemente deslizarse hacia la izquierda.

Ver demostración Descargar archivos

El marcado HTML

El marcado es extremadamente ligero. Simplemente una envoltura que contenga el área y oculte el desbordamiento, luego un “motor” en su interior que hace el deslizamiento, luego se desliza dentro de eso.

Observe que no hay marcado para un botón de parada. Eso no pertenece al marcado porque sin JavaScript sería inútil. Lo aplicaremos a través de JavaScript. Observe también que la primera diapositiva tiene una identificación única. Lo usaremos como nuestra “diapositiva de prueba” para recopilar información de ancho con JavaScript.

<div id="slider">

	<div id="mover">

		<div id="slide-1" class="slide">
		
			<h1>Garden Rack</h1>
			
			<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
			
			<a href="https://css-tricks.com/startstop-slider/#"><img src="images/slide-1-image.png" alt="learn more" /></a>
			
		</div>

		... additional slides follow format of this one, except no need for ID ... 
	
	</div>

</div>

el css

#slider          { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
                   position: relative; margin: 50px 0; }
#mover           { width: 2880px; position: relative; }
.slide           { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1        { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
                   color: #ac0000; }
.slide p         { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img       { position: absolute; top: 20px; left: 400px; }
#slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
                   padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

No hay mucho de qué hablar aquí, mucho de esto son simplemente opciones de presentación. Funcionalmente, la posición relativa en el #mover es importante y necesaria para el efecto de deslizamiento. Asimismo es el posicionamiento absoluto en los elementos img. Con este CSS en efecto, pero JavaScript desactivado, el control deslizante mostrará la primera diapositiva y eso es todo (ideal, si me preguntas).

El JavaScript de jQuery

El 90% de lo que estamos haciendo aquí es específico de jQuery. Hace las cosas mucho más fáciles. Tendremos que asegurarnos de que la biblioteca esté cargada antes que el resto de nuestro script.

<script type="text/javascript" src="https://css-tricks.com/startstop-slider/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/startstop-slider.js"></script>

En la parte superior de nuestro archivostartstop-slider.js, hay una única variable que se explica por sí misma

// SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
var delayLength = 4000;

Luego comenzaremos nuestra manipulación, después de que el DOM esté listo, por supuesto. Lo primero que haremos será agregar el botón Detener/Iniciar al control deslizante. CSS ya está en su lugar para posicionarlo y diseñarlo.

$(function() {

	$("#slider").append('Stop');

});

A continuación, debemos ser un poco inteligentes y comenzar a descubrir a qué nos enfrentamos. La cantidad de diapositivas y sus anchos son información vital para nuestro control deslizante. En lugar de codificarlos, usaremos jQuery para contarlos y determinar su ancho. Contar es fácil, el ancho es un poco más complicado ya que necesitamos extraer tres valores CSS (ancho, relleno izquierdo, relleno derecho), analizarlos y agregarlos.

var $slide1 = $("#slide-1");

var panelWidth = $slide1.css("width");
var panelPaddingLeft = $slide1.css("paddingLeft");
var panelPaddingRight = $slide1.css("paddingRight");

panelWidth = parseFloat(panelWidth, 10);
panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
panelPaddingRight = parseFloat(panelPaddingRight, 10);

panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
	
var numPanels = $(".slide").length;
var tooFar = -(panelWidth * numPanels);

Ahora necesitamos escribir código para manejar la acción de deslizamiento. Hay dos lugares en los que potencialmente querremos iniciar la animación. Uno es justo cuando se carga la página y el otro es cuando se presiona el botón “Inicio”. Debido a estos dos lugares diferentes, tiene sentido envolver nuestra animación en una función y llamarla según sea necesario (SECO: No te repitas).

function doMove(panelWidth, tooFar) {
	var leftValue = $("#mover").css("left");
	
	// Fix for IE
	if (leftValue == "auto") { leftValue = 0; };
	
	var movement = parseFloat(leftValue, 10) - panelWidth;
	
	if (movement == tooFar) {
		$(".slide img").animate({
			"top": -200
		}, function() {
			$("#mover").animate({
				"left": 0
			}, function() {
				$(".slide img").animate({
					"top": 20
				});
			});
		});
	}
	else {
		$(".slide img").animate({
			"top": -200
		}, function() {
			$("#mover").animate({
				"left": movement
			}, function() {
				$(".slide img").animate({
					"top": 20
				});
			});
		});
	}
}

En lenguaje sencillo: compruebe y vea dónde está el control deslizante. Si está en el último panel, regrese al primer panel. De lo contrario, avance la longitud de un panel. Observe todo el anidamiento de las funciones .animate(). La función de animación tiene un evento de devolución de llamada, que se ejecuta cuando se completa la animación. Entonces, para que nuestras animaciones se ejecuten una tras otra (en lugar de todas a la vez), usamos las devoluciones de llamada. Así que ahora anima la imagen hacia arriba, el mover hacia arriba y luego la imagen hacia abajo, en ese orden.

Tenga en cuenta que pasamos las variables ancho y “demasiado lejos”, ya que la función lo necesita y no son variables globales. También hay una pequeña solución para IE que Eric Wendelin arregló para mí, donde el valor de la izquierda se vuelve a establecer extrañamente en “automático” en lugar de “0”.

La “reproducción automática”

JavaScript proporciona la función integrada perfecta para un widget de “reproducción automática” como el nuestro: SetInterval(); Lo usaremos para llamar a nuestra función:

sliderIntervalID = setInterval(function(){
	doMove(panelWidth, tooFar);
}, delayLength);

La variable “sliderIntervalID” no es necesaria, pero eso nos permite llamar más tarde a clearInterval() con esa ID para detenerlo. Vital para nuestra funcionalidad deseada.

Todo lo que queda ahora es codificar la parada y el inicio con nuestro pequeño botón:

$("#slider-stopper").click(function(){
	if ($(this).text() == "Stop") {
		clearInterval(sliderIntervalID);
	 	$(this).text("Start");
	}
	else {
		sliderIntervalID = setInterval(function(){
			doMove(panelWidth, tooFar);
		}, delayLength);
	 	$(this).text("Stop");
	}
});

El botón comienza diciendo “Detener”, ya que disparamos la animación justo cuando se carga la página. Eso tiene sentido. Entonces, cuando se hace clic en ese botón, verifica y ve si ese texto permanece “Detener”, si lo hace, detiene el Intervalo que se está ejecutando y cambia el texto a “Iniciar”. Magia.

Si se hace clic en el botón y dice otra cosa que no sea “Detener” (como lo hace cuando dice “Iniciar”), el botón activará la función setInterval nuevamente y cambiará el texto del botón nuevamente a “Detener”. Sencillo y hermoso.

Cómo personalizar

Para agregar otro panel, agregue otro div dentro del #mover:

<div class="slide">
   <h1>Name of Slide</h1>
   ...etc
</div>

¡Eso es! El código es lo suficientemente inteligente como para recogerlo y saber qué hacer. Incluso puede cambiar el CSS y debería sobrevivir.

(Visited 9 times, 1 visits today)