Es posible que haya visto una función de deslizamiento de imágenes en varias plataformas populares de redes sociales. Donde el usuario puede deslizar la imagen hacia la derecha o hacia la izquierda. ¿Sabía que esos tipos de controles deslizantes de imágenes se pueden hacer usando HTML CSS y JavaScrip sin usar ningún complemento?
Hoy, en este blog, aprenderá cómo crear un control deslizante de imagen utilizando HTML CSS y JavaScript. Crear un control deslizante de imagen es una excelente manera de mejorar sus habilidades de codificación en HTML, CSS y JavaScript. Recientemente, también creé un Control deslizante de imagen en Swiper Js. Espero que la publicación también sea beneficiosa para usted.
Si está ansioso por ver una demostración de este Control deslizante de imágenes y está interesado en aprender cómo crearlo usando HTML CSS y JavaScript, a continuación hay un video tutorial disponible que lo guiará a través del proceso paso a paso.
Video Tutorial de Image Slider en HTML CSS y JavaScript
La creación de Image Slider proporciona un proyecto práctico que le permite practicar el uso de varias técnicas y conceptos en un escenario del mundo real. Recomiendo encarecidamente que veas el video tutorial completo.
En el tutorial de video para Image Slider, proporcioné comentarios sobre cada línea de código para ayudarlo a comprender mejor el proceso. Sin embargo, si prefiere no ver el video, aún puede seguir las instrucciones en esta publicación de blog para crear su propio Control deslizante automático de imágenes.
Pasos para crear un control deslizante de imagen en HTML CSS y JavaScript
Para crear un Control deslizante de imagen usando HTML, CSS y JavaScript estándar, siga los pasos que se indican línea por línea:
Crea una carpeta. Puede nombrar esta carpeta como desee y, dentro de esta carpeta, crear los archivos mencionados.
Cree un archivo index.html. El nombre del archivo debe ser index y su extensión .html
Cree un archivo estilo.css. El nombre del archivo debe ser estilo y su extensión .css
Cree un archivo script.js. El nombre del archivo debe ser script y su extensión .js
Una vez que cree estos archivos, pegue los códigos proporcionados en los archivos especificados. Si no desea hacer esto, desplácese hacia abajo y descargue el código fuente de este control deslizante de imagen haciendo clic en el botón de descarga dado.
Primero, pegue los siguientes códigos en su archivo index.html.<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Slider JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="script.js" defer></script>
</head>
<body>
<section class="wrapper">
<i class="fa-solid fa-arrow-left button" id="prev"></i>
<div class="image-container">
<div class="carousel">
<img src="images/image1.jpg" alt="" />
<img src="images/image2.jpg" alt="" />
<img src="images/image3.jpg" alt="" />
<img src="images/image4.jpg" alt="" />
</div>
<i class="fa-solid fa-arrow-right button" id="next"></i>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #343f4f;
}
.wrapper {
display: flex;
max-width: 650px;
width: 100%;
height: 400px;
background: #fff;
align-items: center;
justify-content: center;
position: relative;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper i.button {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 36px;
width: 36px;
background-color: #343f4f;
border-radius: 50%;
text-align: center;
line-height: 36px;
color: #fff;
font-size: 15px;
transition: all 0.3s linear;
z-index: 100;
cursor: pointer;
}
i.button:active {
transform: scale(0.94) translateY(-50%);
}
i#prev {
left: 25px;
}
i#next {
right: 25px;
}
.image-container {
height: 320px;
max-width: 500px;
width: 100%;
overflow: hidden;
}
.image-container .carousel {
display: flex;
height: 100%;
width: 100%;
transition: all 0.4s ease;
}
.carousel img {
height: 100%;
width: 100%;
border-radius: 18px;
border: 10px solid #fff;
object-fit: cover;
}
// Get the DOM elements for the image carousel
const wrapper = document.querySelector(".wrapper"),
carousel = document.querySelector(".carousel"),
images = document.querySelectorAll("img"),
buttons = document.querySelectorAll(".button");
let imageIndex = 1,
intervalId;
// Define function to start automatic image slider
const autoSlide = () => {
// Start the slideshow by calling slideImage() every 2 seconds
intervalId = setInterval(() => slideImage(++imageIndex), 2000);
};
// Call autoSlide function on page load
autoSlide();
// A function that updates the carousel display to show the specified image
const slideImage = () => {
// Calculate the updated image index
imageIndex = imageIndex === images.length ? 0 : imageIndex < 0 ? images.length - 1 : imageIndex;
// Update the carousel display to show the specified image
carousel.style.transform = `translate(-${imageIndex * 100}%)`;
};
// A function that updates the carousel display to show the next or previous image
const updateClick = (e) => {
// Stop the automatic slideshow
clearInterval(intervalId);
// Calculate the updated image index based on the button clicked
imageIndex += e.target.id === "next" ? 1 : -1;
slideImage(imageIndex);
// Restart the automatic slideshow
autoSlide();
};
// Add event listeners to the navigation buttons
buttons.forEach((button) => button.addEventListener("click", updateClick));
// Add mouseover event listener to wrapper element to stop auto sliding
wrapper.addEventListener("mouseover", () => clearInterval(intervalId));
// Add mouseleave event listener to wrapper element to start auto sliding again
wrapper.addEventListener("mouseleave", autoSlide);
Eso es todo, ahora ha creado con éxito un proyecto en Image Slider. Si su código no funciona o ha tenido algún problema, descargue los archivos del código fuente desde el botón de descarga indicado. Es gratis y se descargará un archivo zip que contiene la carpeta del proyecto con los archivos del código fuente.
DESCARGA:https://www.codingnepalweb.com/image-slider-html-css-javascript-2/CREDITOS A CODINGNEPALWEB POR LO TANTO NO PIDO OBTENER "GRACIAS" PERO SI GUSTAN POR DARME ESTARE AGRADECIDO.
A MUCHOS LES SERVIRA PARA DECORAR SU TEMPLATE.
SALUDOS
Home
TOP Ranking MU
Magichand
Fanpage
Tags
Login
Register
Topic: Image Slider in HTML CSS & JavaScript (Visto 645 veces)
June 26, 2020, 05:38:21 PM