Cómo crear un carrusel usando sólo HTML y CSS. Carrusel jQuery simple Carrusel ciclista con html de desplazamiento automático

Uno de formas efectivas Atraer la atención de los usuarios en la página de un sitio web es la creación de animaciones en movimiento. Los elementos de animación ayudan a informar y mostrar más claramente a los usuarios sobre su producto. Últimamente Los paneles emergentes se han vuelto muy populares, así como una serie de otros efectos que aparecen al desplazarse o hacer clic en una imagen. También se les conoce como controles deslizantes, carruseles y paneles emergentes. En este artículo hablaremos sobre la creación de un control deslizante de carrusel adaptativo con un suave efecto de desplazamiento automático.

Hoy en día, hay cientos de reseñas en Internet con enlaces a soluciones listas para usar, pero la mayoría de ellas contienen muchas funciones no utilizadas que reducen significativamente el rendimiento del control deslizante, además de ralentizar la carga del sitio en su conjunto. Los desarrolladores web profesionales siempre se han esforzado por crear contenido flexible y personalizable. productos de software, con un umbral de entrada bajo para bibliotecas y complementos adicionales. Es por eso que nuestro script usa requerimientos mínimos para organizar dicho control deslizante. La funcionalidad le permite configurar el intervalo de cambio, la velocidad y la elección de una diapositiva específica. A continuación se muestran una serie de variables que regulan el funcionamiento del control deslizante.

timeList - velocidad de cambio de diapositiva

TimeView - mostrar la hora

RadioBut: botones debajo de la diapositiva para una navegación rápida. El valor predeterminado es verdadero, si usa falso los botones desaparecerán.

¡Ahora comencemos! Creemos y abramos el archivo index.htm.

Como podemos ver, no hay nada complicado en el código presentado; slider-wrap determina la posición general y alinea el control deslizante con el centro de la pantalla. El parámetro de diapositiva activa establece el tamaño y la altura de la imagen según su longitud. Y el control deslizante muestra solo la imagen activa.

Ahora creemos y abramos el archivo style.css y agreguemos el marcado que necesitamos allí:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); cuerpo ( color: #4f4f5a; familia de fuentes: "Roboto", sans-serif; tamaño de fuente: 16px; relleno: 0; margen: 0; ) #slider-wrap( ancho máximo: 800px; margen: 0 auto; margin-top: 80px; ) #active-slide ( ancho: 100%; visualización: tabla; posición: relativa; desbordamiento: oculto; -webkit-user-select: ninguno; -moz-user-select: ninguno; -ms- selección de usuario: ninguna; -o-selección de usuario: ninguna; selección de usuario: ninguna; #control deslizante (posición: relativa; ancho: calc(100% * 4); arriba: 0; izquierda: 0; margen: 0; relleno: 0; -webkit-transition: 1s; -función-de-temporización-de-transición-webkit: entrada-salida fácil; ); estilo de lista: ninguno; visualización: en línea; flotante: izquierda; ) .slide img (ancho: 100%; ) .Radio-But (margen-superior: 10px; text-align:center; ). Ctrl-select (margen:2px; visualización:bloque en línea; ancho:16px; alto:16px; desbordamiento:oculto; sangría de texto:-9999px; fondo:url(radioBg.png) centro inferior sin repetición; ) .Radio-Pero .ctrl-select:hover ( cursor:puntero; posición-fondo:centro centro; ) .Radio-Pero .ctrl-select.active (posición-fondo:centro arriba; ) #prewbutton, #nextbutton ( mostrar :bloque; altura:100%; desbordamiento:oculto; fondo: url("arrowBg.png") opacidad central izquierda: 0.5; índice z: 3; importante; botón siguiente (derecha:10px; fondo:url(arrowBg.png) centro derecho sin repetición; ) #prewbutton:hover, # nextbutton:hover ( opacidad:1; )

En la propiedad de estilo de ajuste deslizante, ingrese el ancho: la longitud máxima de sus imágenes.

En las propiedades de estilo #slider ( width: calc(100% * 4); ) y .slide ( width: calc(100%/4); ), especifique la cantidad de imágenes en su control deslizante. En nuestro ejemplo hay 4 de ellos.

Si las flechas hacia adelante/atrás interfieren con la visibilidad de su control deslizante, pueden hacerse invisibles y aparecerán cuando pase el cursor sobre ellas. Para hacer esto, en los parámetros prewBut y nextBut, establezca la propiedad de opacidad en 0.

Ahora creemos y abramos nuestro archivo slider.js, que contendrá el código del control deslizante. No olvide incluir la biblioteca jQuery.

$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = función(flecha)( clearTimeout(slideTime); if(flecha == "siguiente")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) traducirWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); ") ( if(NumDiapositiva == 1) ( NumDiapositiva=NumDiapositiva; ) else(NumDiapositiva-=1) TranslateWidth = -$("#active-slide").width() * (NumDiapositiva - 1); $(" # slider").css(("transform": "translate(" + traducirWidth + "px, 0)")); )else( slideNum = flecha; traducirWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); $(".ctrl-select.active" ). removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active" ) if(RadioBut)( var $linkArrow = $("") .prependTo ("#active -deslizar"); $("#nextbutton").click(function())( animSlide("next"); return false; )) $("#prewbutton").click(function())( animSlide("prew"); return falso; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += "" + index + ""; )); $("" + adderSpan +"").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("activo"); $(".ctrl-select").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pausa = falso; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), TimeView);) ) $("#slider-wrap").hover(function( ))( clearTimeout(slideTime); pausa = verdadero;), función()(pausa = falso; rotador(); )); var haciendo clic = falso; var anteriorX; $(".slide").mousedown(function(e)( hacer clic = verdadero; prevX = e.clientX; )); $(".slide").mouseup(function() ( hacer clic = falso; )); $(documento).mouseup(función())( hacer clic = falso; )); $(".slide").mousemove(función(e)( if(haciendo clic == verdadero) ( ​​if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) hacer clic = false; ) )); $(".slide").hover().css("cursor", "puntero"); rotador(); ));

La función animSlide acepta tres tipos de valores: siguiente, anterior y valor numérico. El siguiente parámetro cambia la siguiente diapositiva, prew devuelve la anterior y el valor numérico es la diapositiva específica seleccionada mediante el botón de opción debajo de la diapositiva.

El control deslizante presentado utilizó imágenes del recurso web https://pixabay.com/.

¿Hacer un carrusel usando JS puro, desde cero y usted mismo? ¿Por qué reinventar la rueda cuando existen soluciones listas para usar, controles deslizantes slick/owl? Hay al menos dos razones para esto:

• con fines educativos
• para completar tareas de prueba

Al solicitar un trabajo, incluso para el puesto vacante de diseñador de diseño HTML, se le pedirá no solo que cree un carrusel, sino también que lo implemente en JS, sin utilizar bibliotecas de terceros.

Ejemplo de carrusel ¿Qué hace JavaScript con los elementos?

Cambia las propiedades de los elementos utilizando métodos cuando ocurren eventos. Tres pilares sobre los que se apoya JavaScript:

• propiedades
• métodos
• eventos

El usuario activa el evento onclick cuando se hace clic en el botón. La tarea del programador es adjuntar un evento de clic al elemento deseado y escribir instrucciones (función) para el navegador sobre lo que debería suceder al hacer clic.

Marcado HTML para carrusel

Creemos un contenedor para imágenes, insertemos las imágenes y dos botones: Adelante / Atrás.

Atrás
Adelante

Estilos CSS #galería(
ancho: 640 px;
margen: 20px automático;
alineación de texto: centro;
}

#galería.fotos img(
ancho: 100%;
pantalla: ninguna;
}

#galería .fotos img:primer hijo(
bloqueo de pantalla;
}

Botones (
margen superior: 20px;
}

Lógica del carrusel

¿Cómo se escribe código JS cuando no se comprende la lógica de lo que está sucediendo? Cuando presionas el botón Adelante, la imagen actual desaparece y aparece una nueva en su lugar. Siempre hay una imagen en el área de visibilidad, pero ¿dónde están entonces las demás? Y ocultamos el resto, configuramos display: none para todas las imágenes, dejando solo la primera, configurándola display: block, a través de la pseudoclase del primer hijo.

Cómo hacer que cada vez que hagas clic en un botón Adelante, la primera imagen desapareció, apareció la segunda, y en lugar de la segunda, la tercera. Es necesario cambiar la propiedad de visualización entre ninguno / bloquear cuando hace clic en el botón.

Código JS Haciendo una selección de elementos.

Consigamos los botones Adelante / Atrás por selector, usando el método querySelector y poniéndolos en las variables btn_prev/btn_next.

Let btn_prev = document.querySelector("#gallery .buttons .prev");
let btn_next = document.querySelector("#gallery .buttons .next");

Obtengamos todas las imágenes por selector usando el método querySelectopAll y también las coloquemos en la variable de imágenes.

querySelectopAll: obtiene una matriz de elementos, es decir, todas las imágenes.

Let imágenes = document.querySelectorAll("#gallery .photos img");

En una matriz los elementos se almacenan, ya numerados, empezando desde cero. Por tanto, podemos contactar con ellos por número. Pero primero creemos una nueva variable y coloquemos en ella el número de la primera imagen, la que tiene la propiedad display:block.

Sea i = 0; // número de la imagen actual en la pantalla

Pasamos a la imagen actual y cambiamos su propiedad de visualización en estilos.

Imágenes[i].style.display = "ninguno"; // ocultar la imagen actual

Ahora no hay ni una sola imagen en la pantalla. ¿Cómo aparecerá la siguiente imagen allí? Sabemos que el número de la siguiente imagen siempre será mayor que el número de la anterior, en uno.

Yo++; //aumentar la variable i en uno

imágenes.longitud es el número de imágenes que pueden cambiar, por lo que no es necesario indicar que tenemos 3 imágenes, el navegador ya lo sabe. Aumentamos el contador i, cada vez en uno, hasta que se muestre la última imagen, y luego forzamos al carrusel a volver nuevamente a la primera imagen. Esto se llama bucle.

Anotamos la condición de que cuando el contador i sea mayor que el número de imágenes disponibles, volverá a la imagen actual, número 0.

Si(i >= imágenes.longitud)(
yo = 0; // la variable i es 0
}

Al desplazarse por las imágenes en orden inverso, el contador i debería disminuir en uno. Si el valor de la variable es menor que cero, entonces debes ingresar el número de la última imagen.

Btn_prev.onclick = función())(
imágenes[i].style.display = "ninguno";
yo = yo - 1;
si yo< 0){
i = imágenes.longitud - 1;
}
imágenes[i].style.display = "bloquear";
}

Restamos uno del número total de imágenes.longitud y obtenemos la imagen número 2. Esta será la última imagen, ya que el cálculo en programación comienza desde cero.

Para aprobar la prueba para el puesto de diseñador de diseño, necesita una comprensión segura de JS, que está dirigido específicamente a diseñadores de diseño.

Bien. En este artículo, comparto un excelente control deslizante/carrusel liviano en jQuery. El carrusel tiene un efecto 3D al desplazarse por las imágenes. La foto central tiene un tamaño normal, y cuanto más alejada del centro está la imagen, más pequeña es de tamaño y tiene mayor transparencia.

El carrusel no tiene ningún estilo, pero no es necesario eliminar CSS innecesario, puede agregar fácilmente sus propios estilos. Instalar el control deslizante también es muy fácil.

Instalación de un carrusel jQuery en un sitio web 1. Descargue el archivo

Primero necesitas descargar el archivo y descomprimir los archivos.

2. Rellenar archivos necesarios al servidor

Ahora necesitas agregar las carpetas imágenes y js a la raíz de tu sitio. Si dichas carpetas ya existen, transfiera los archivos que contienen a estas carpetas.

3. Conectar guiones

Incluimos la biblioteca jquery.

y un script responsable del funcionamiento del carrusel

así como la configuración del script

$(document).ready(function () ( var carrusel = $("#carrusel").waterwheelCarousel(( elementos flanqueantes: 3, movingToCenter: función ($item) ( $("#callback-output").prepend(" MovingToCenter: " + $item.attr("id") + "
"); ), moveToCenter: función ($item) ( $("#callback-output").prepend("movedToCenter: " + $item.attr("id") + "
"); ), movingFromCenter: función ($item) ( $("#callback-output").prepend("movingFromCenter: " + $item.attr("id") + "
"); ), movidoDesdeCentro: función ($item) ( $("#callback-output").prepend("movedFromCenter: " + $item.attr("id") + "
"); ), clickedCenter: función ($item) ( $("#callback-output").prepend("clickedCenter: " + $item.attr("id") + "
"); ) )); $("#prev").bind("clic", función () ( carousel.prev(); return false )); $("#next").bind("clic", function () ( carrusel.next(); return false; )); $("#reload").bind("clic", function () ( newOptions = eval("(" + $("#newoptions"). val() + ")"); carrusel.reload(nuevasOpciones); devuelve falso ));

Naturalmente insertamos todo esto en la etiqueta.

4. Conectando estilos

También debe especificar los estilos que probablemente cambiará, pero son necesarios para la visualización básica del carrusel. Aquí están:

Cuerpo (familia de fuente:Arial; tamaño de fuente:12px; fondo:#ededed; ) .example-desc (margen:3px 0; relleno:5px; ) #carrusel (ancho:960px; margen: 60px auto; borde:1px sólido #222; altura:300px; claro: ambos; fondo:#FFF ) #carousel img (visibilidad:oculta; /* ocultar imágenes hasta que el carrusel pueda manejarlas */ cursor:puntero; * de lo contrario, los elementos no son tan obvios se puede hacer clic */ .split-left (ancho:450px; float:left; ) .split-right (ancho:400px; float:left; margin-left:10px; ) # callback-output (alto:250px; overflow:scroll ; ) área de texto#nuevas opciones ( ancho: 430 px; ) .nav ( ancho: 80 px; margen: 20 px automático )

Pegue los estilos en un archivo css existente o directamente en , envolviéndolos en

5. Inserta el código html del carrusel.

Bueno, el último paso: pegar el código html del carrusel donde queramos verlo.

Anterior | Próximo

El carrusel jQuery 3D está conectado y si hiciste todo correctamente, funcionará. Si esto no sucede, debe verificar todas las rutas a los scripts js y los posibles conflictos de scripts. Chau a todos

En Internet puedes encontrar muchos complementos excelentes para creación de jQuery carruseles y controles deslizantes. Le permiten implementar desplazamiento dinámico con efectos adicionales.

Esta es una de las tendencias más populares en diseño web en los últimos años. Además, el uso de bibliotecas listas para usar y complementos de jQuery puede ahorrar mucho tiempo. Todo lo que necesita hacer es proporcionar un enlace a los archivos JavaScript y CSS y luego aplicar el efecto a los elementos HTML deseados.

También puedes establecer tus propias configuraciones y estilos CSS. El artículo de hoy tiene como objetivo presentarte. complementos jQuery responsivos para crear carruseles y controles deslizantes.

Distractful: complemento jQuery para crear un control deslizante de contenido de pantalla completa sensible al tacto

Control deslizante de carrusel de contenido jQuery responsivo en pantalla completa con soporte pantallas táctiles. El complemento se distribuye bajo acuerdo de licencia LICENCIA PÚBLICA GENERAL GNU v3:

Neoslide: un complemento de carrusel jQuery simple y extensible

Un complemento jQuery simple y extensible que le permitirá utilizar un control deslizante totalmente personalizable en cualquier página web:

Hslider: complemento de galería de imágenes responsiva de ancho completo

Otro complemento para mostrar imágenes usando un carrusel jQuery responsivo con controles y duración de retardo personalizada:

Carousel 3D: complemento de carrusel jQuery con efectos de rotación 3D

Control deslizante elegante: carrusel jQuery responsivo en pantalla completa

Carrusel jQuery en miniatura y atractivo para mostrar contenidos e imágenes con diferentes tipos de navegación (flechas SVG con miniaturas de imágenes, elementos de paginación o pestañas):

Carrusel PaW: Carrusel Responsivo Desarrollado por jQuery

PaW Carousel (v2) es un complemento en miniatura para crear carruseles jQuery simples y receptivos con miniaturas de imágenes:

Carousel Sharer: carrusel jQuery para volver a publicar en redes sociales

Carousel Sharer es un complemento de jQuery que le permite mostrar varios productos seguidos y permite a los visitantes compartir sus productos en Facebook, Twitter, Google+ y Pinterest:

Simply Carousel: un carrusel de imágenes responsivo minimalista

Simply Carousel es un complemento jQuery pequeño y rápido que le permite crear carruseles y controles deslizantes de imágenes flexibles y receptivos:

Diapositivas: carrusel jQuery responsivo y presentación de diapositivas con soporte táctil

Slides es un complemento jQuery en miniatura para crear carruseles responsivos para un sitio web jQuery con miniaturas, navegación con flechas y la capacidad de usar controles personalizados. Se ha implementado soporte para pantallas táctiles:

carrusel de contenido jQuery

Un carrusel jQuery simple y responsivo con funciones de reproducción automática, controles e incluso funciones de devolución de llamada:

Slick: carrusel jQuery responsivo y flexible

Slick es un complemento "nuevo" para crear anuncios personalizados, responsivos y optimizados. dispositivos móviles Carruseles y controles deslizantes de jQuery que pueden funcionar con cualquier elemento HTML:

bxSlider: control deslizante de contenido HTML jQuery

bxSlider es uno de los mejores controles deslizantes de contenido jQuery disponibles en la actualidad. Este complemento es perfecto para organizar presentaciones de diapositivas:

CarouFredSel: un complemento de carrusel jQuery potente y flexible

jQuery.carouFredSel es un complemento que convierte cualquier elemento HTML en un carrusel de contenido. Permite desplazar uno o más elementos simultáneamente, tanto horizontal como verticalmente. También puedes habilitar la reproducción automática y hacer que el desplazamiento sea interminable:

Carrusel de contenidos ciclistas con jQuery

Un carrusel en el que cada clic revelará un nuevo bloque de contenido. Al hacer clic en la cruz se cerrará el bloque activo y nos devolverá a la posición inicial de visualización de miniaturas:

Cloud Carousel: carrusel 3D en Javascript

Este carrusel te permite crear una perspectiva realista. Muchos carruseles jQuery 3D aplican un efecto de perspectiva solo al tamaño de la imagen, no a su posición, lo que resulta en una desproporción de elementos en la página:

Elastislide: carrusel responsivo con jQuery

Elastislide es un carrusel jQuery responsivo que se adapta a cualquier tamaño de pantalla. Insertar un carrusel en un contenedor con un ancho flexible hará que el carrusel sea “gomoso”:

jCarrusel Lite

Con este complemento podrás ver imágenes o elementos HTML como un control deslizante. Pesa sólo 2Kb, pero al mismo tiempo te permite utilizar tu propia configuración:

Carrusel 3D

Cree un carrusel jQuery 3D a partir de imágenes con efectos de sombra y animaciones que reaccionen a la posición del cursor:

Complemento de carrusel JQuery

La configuración de este complemento le permite determinar cuántos elementos se mostrarán en el carrusel, después de lo cual el complemento lo adapta al ancho deseado:

Control deslizante de imagen giratoria con jQuery

Un control deslizante de imagen asimétrico con una pequeña adición: cuando te desplazas por las imágenes, giran ligeramente. Debido al ligero desplazamiento de los elementos, el control deslizante adquiere una forma inusual:

Carrusel de funciones de jQuery

Este complemento está diseñado para mostrar artículos recomendados sobre pagina de inicio, pero también se puede utilizar para cualquier otro contenido. Permite mostrar hasta tres imágenes simultáneamente mientras el resto del carrusel de contenidos jQuery está oculto:

Carrusel infinito de jQuery

Es un complemento de jQuery que te permite mostrar una cantidad ilimitada de imágenes y videos en un carrusel. A diferencia de otros carruseles, Infinite Carousel muestra elementos en un bucle sin fin sin necesidad de utilizar la navegación:

Complemento jQuery Liquid Carrusel

Liquid Carousel es un complemento diseñado para crear diseños fluidos. Cada vez que el contenedor del carrusel responsivo de jQuery cambia de tamaño, la cantidad de elementos mostrados se ajusta al nuevo ancho:

Carrusel de Jquery MS

Sí, el tema está bastante manido. Pero aun así, encontrar lo que realmente necesitas suele resultar complicado. Todos ofrecen scripts muy sofisticados, con muchas funciones innecesarias. Y normalmente estos ya son complementos comprimidos.

Por lo tanto, ofreceré mi versión alternativa de un carrusel muy simple usando jQuery.

Se puede utilizar como carrusel de imágenes, así como carrusel de noticias o cualquier otro contenido =)

El único pequeño giro que me permití fue una sombra cerca del bloque del carrusel.

ACTUALIZADO: 06/07/2014

Se verá algo como esto:
Descargar DEMO

La estructura tomará la siguiente forma:

Carrusel adaptativo simple de TJ

Describamos los estilos:

Carrusel ( ancho máximo: 1080px; /* ancho de todo el bloque */ margen: 50px auto; ancho:100%; ) .carousel-wrapper ( margen: 10px 30px; /* relleno para flechas */ desbordamiento: oculto; / * ocultar contenido que se extiende más allá del área principal */ position:relative; ) .carousel-items ( width: 10000px; /* establecer un ancho mayor para el conjunto de elementos */ position: relativo; /* posicionar el bloque en relación con el área principal del carrusel */ ) .carousel -block ( float: left; /* alinear todos los elementos del carrusel */ width: 250px; /* establecer el ancho de cada elemento */ padding: 10px 10px 10px 0px; /* crear márgenes para que los elementos no se fusionen */ ) .carousel -block img( display:block; ) /*********** BOTONES ***********/ .carousel-button -izquierda a, .carrusel-botón-derecha a( ancho: 25px; posición: superior relativa: 80px; decoración de texto: ninguna) .carrusel-botón-izquierda izquierda.png .carrusel-botón-derecha a( flotante: bien; fondo: url(../images/carousel-right.png); ) /********* SOMBRA ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); )

Y finalmente, cómo debería funcionar:

// Manejo de un clic en la flecha derecha $(document).on("click", ".carousel-button-right",function())( var carusel = $(this).parents(".carousel"); right_carusel(carusel); devuelve falso)); // Manejo de un clic en la flecha izquierda $(document).on("click",".carousel-button-left",function())( var carusel = $(this).parents(".carousel"); left_carusel(carusel); devuelve falso)); función left_carusel(carusel)( var block_width = $(carusel).find(".carrusel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(- 1).clone().prependTo($(carusel).find(".carrusel-items")); $(carusel).find(".carrusel-items").css(("left":"-" +block_width+"px")); $(carusel).find(".carrusel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carrusel-items" ).animate((izquierda: "0px"), 200); función right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find ( ".carousel-items").animate((izquierda: "-"+ block_width +"px"), 200, function())( $(carusel).find(".carousel-items .carousel-block"). eq(0).clone().appendTo($(carusel).find(".carrusel-items")); $(carusel).find(".carrusel-items .carousel-block").eq(0) .remove(); $(carusel).find(".carousel-items").css(("left":"0px")); $(function() ( //Descomenta la línea siguiente para habilitar el desplazamiento automático de el carrusel auto_right(".carrusel:first" )) // Función de desplazamiento automático auto_right(carusel)( setInterval(function())( if (!$(carusel).is(".hover")) right_carusel( carrusel); ), 3000) ) // Mueve el cursor sobre el carrusel $(document).on("mouseenter", ".carousel", function())($(this).addClass("hover"))) // Eliminar el cursor del carrusel $(document).on("mouseleave", ".carousel", function())($(this).removeClass("hover")))

En consecuencia, se puede eliminar la sombra. Y para usarlo, solo necesita cambiar el tamaño del bloque principal y los bloques de "desplazamiento" anidados en CSS. También es muy fácil hacer un bucle en este proceso para que se desplace automáticamente (en este caso, simplemente descomente la llamada a la función auto_right). Es decir, ¡desde esta sencilla galería podrás realizar todo lo que necesites en el marco de la tarea!

Cabe señalar también que el ejemplo dado es adaptativo, es decir, el tamaño del carrusel se adapta según el tamaño de la pantalla y se mostrará correctamente tanto en la pantalla del ordenador o portátil, como en las pantallas de tablets y smartphones.