creación de carousel con IA

-
_Funciones de cadena_
- `length()`
- `toUpperCase()`
- `toLowerCase()`
- `trim()`
- `split()`
- `join()`

_Funciones de número_
- `parseInt()`
- `parseFloat()`
- `Math.round()`
- `Math.floor()`
- `Math.ceil()`

_Funciones de array_
- `push()`
- `pop()`
- `shift()`
- `unshift()`
- `sort()`
- `reverse()`

_Funciones de objeto_
- `Object.keys()`
- `Object.values()`
- `Object.entries()`
- `JSON.stringify()`
- `JSON.parse()`

_Funciones de fecha y hora_
- `Date()`
- `getTime()`
- `getYear()`
- `getMonth()`
- `getDate()`

_Funciones de control de flujo_
- `if()`
- `else()`
- `switch()`
- `for()`
- `while()`

_Funciones de evento_
- `addEventListener()`
- `removeEventListener()`
- `preventDefault()`
- `stopPropagation()`

Funciones en JavaScript:
moveSlide(step): Cambia la imagen visible del carrusel según el valor de step (1 para siguiente, -1 para anterior). Actualiza el índice y mueve las imágenes con transform.

startAutoplay(): Inicia un intervalo para avanzar automáticamente las imágenes cada 3 segundos, llamando a moveSlide(1).

Explicación de las funciones:
moveSlide(step): Cambia el índice de la imagen y ajusta la propiedad transform para mover las imágenes dentro del carrusel.

startAutoplay(): Ejecuta moveSlide(1) cada 3 segundos, permitiendo que el carrusel avance automáticamente.

Clases en HTML y CSS:
carousel: Define el contenedor del carrusel con un tamaño específico y oculta las imágenes fuera de vista.

carousel-images: Contenedor de imágenes que se mueve horizontalmente con display: flex y transition.

carousel-control-left y carousel-control-right: Botones para navegar hacia la izquierda y derecha, con estilo de fondo semitransparente.

¿Para qué sirve querySelector()?
Se utiliza para seleccionar el primer elemento que coincide con el selector CSS, como las imágenes del carrusel y los botones de control.

¿Para qué sirve getElementById()?
Permite seleccionar un elemento único por su ID. No se usa en este código, pero se usaría para acceder a un único elemento identificado por id.

Variables en JavaScript:
currentIndex: Guarda el índice de la imagen visible en el carrusel y se actualiza con cada movimiento.

slides: Contiene todas las imágenes del carrusel obtenidas con querySelectorAll.

totalSlides: Número total de imágenes en el carrusel, usado para asegurar que el movimiento sea cíclico.

Comentarios

Publicar un comentario

Entradas populares de este blog

METOLOGIA DE LA INVESTIGACIÓN, PROYECTO, PÁGINA DE TURISMO

-
TITULO: HOTELERÍA TOCAIMA CUNDINAMARCA RESUMEN: principal mente lo que queremos realizar en nuestra página de la hotelería TOCAIMA CUNDINAMARCA cambiar completa mente las imágenes de nuestra página hacer un carrusel en el que ayude a tener una mejor presentación acerca de nuestros hoteles, también tener una mejor información como por ejemplo en donde se encuentran ubicados, que sepan acerca de sus menús, cambiar todo lo que tiene que ver con la letra ya que en estos momentos se encuentra muy mal redactada  JUSTIFICACIÓN: La hotelería es un destino turístico que ofrece una experiencia única y atractiva para los visitantes.Nuestra página web busca promocionar y destacar los hoteles como un lugar imperdible para aquellos que buscan disfrutar un fin de semana o unas vacaciones con sus familiares o con su pareja. Objetivo General: Potenciar y modernizar la oferta hotelera en Tocaima, Cundinamarca, optimizando la ubicación, tarifas y presentación de los hoteles para incrementar la atracc...
Leer más

Dom en java script

-
Imagen
El DOM (Document Object Model) es una representacion estructurada de un documento HTML o XML como un árbol de objetos. Es la interfaz que permite a JavaScript interactuar con el contenido, estructura y estilo de una página web. Conceptos clave: • Documento: La página HTML completa Nodos: Cada elemento del árbol DOM (etiquetas, texto, atributos) Elementos: Los nodos que representan etiquetas HTML • Arbol DOM: Estructura jerárquica donde cada elemento tiene un padre y puede tener hijos 2.¿Para qué se usa el DOM? EL DOM permite: -Modificar contenido: Cambiar texto, HTML interno -Manipular estructura: Agregar, eliminar o mover elementos -Cambiar estilos: Modificar CSS dinámicamente -Responder a eventos: Clicks, formularios, teclado, etc. -Crear interactividad: Hacer páginas web dinámicas 3. Estructura del DOM document Lhtml I—head | I—title Lmeta Lbody I—header I—main Lbody l-header l--main l l--section |  l___article l__footer 4. Seleccionar Elementos del DOM 4.1 Métodosde Selección +...
Leer más

Números primos

-
Este código HTML con JavaScript permite al usuario ingresar un rango de números (desde y hasta) y, al hacer clic en un botón, muestra en la consola los números primos que hay dentro de ese rango. Utiliza un ciclo while para recorrer los números y una función esPrimo(n) para verificar si cada número es primo. Primos en Rango Ver Números Primos entre dos valores Desde: Hasta: Mostrar en consola Numero primo Números primos Desde: Hasta: Mostrar Numero primos HTML y JavaScript permite ingresar dos números y, al hacer clic en el botón, muestra en la consola todos los números primos entre esos dos valores. Usa una función esPrimo() para verificar si un número es primo y un ciclo for para recorrer el rango indicado por el usuario. También incluye validaciones para asegurar que los datos ingresados sean correctos.
Leer más