Physical Address
Santo Domingo Este, República Dominicana.
Cómo crear un Carrusel de Imágenes Arrastrables en HTML, CSS y JavaScript
Si buscas un carrusel de imágenes arrastrable o carrusel táctil creado con JavaScript sin usar ninguna biblioteca o complemento externo, este blog está escrito para ti. Pero si buscas un control deslizante de imágenes de Swiperjs, puedes consultar este blog sobre el control deslizante de imágenes en HTML, CSS y Swiperjs.
En este blog, aprenderás a crear un carrusel de imágenes arrastrable en HTML, CSS y JavaScript desde cero. Este control deslizante es compatible con todos los navegadores principales, como Chrome, Firefox y Edge, y también funciona en dispositivos móviles o con pestañas gracias a su capacidad de respuesta y su función táctil.
Si no lo sabes, un control deslizante de imágenes o carrusel es un componente de interfaz de usuario útil y crucial del sitio web que se utiliza para mostrar varias imágenes, videos o gráficos en un solo espacio horizontal.
En mi control deslizante de imágenes arrastrable, hay algunas imágenes que los usuarios pueden deslizar arrastrándolas o usando los íconos siguiente y anterior. En la pantalla del escritorio, se muestran tres imágenes a la vez, pero en la pantalla del móvil, se mostrará una imagen a la vez.
Si está entusiasmado por ver una demostración en vivo de este control deslizante de imágenes arrastrables, puede hacer clic aquí para verlo y, para ver un video tutorial completo de este control deslizante, puede ver el video de YouTube proporcionado.
Espero que te haya gustado la demostración del control deslizante de imágenes arrastrables y hayas comprendido los códigos y la lógica detrás de la creación de este control deslizante. En el video, has visto que no usé ningún complemento externo como Swiperjs o Owl Carousel para crear este carrusel de imágenes táctil. Todo está hecho con JavaScript puro.
Si no has visto el video, puedes continuar leyendo el blog y seguir los pasos indicados para crear este control deslizante de imágenes arrastrables por ti mismo. De lo contrario, ve al final de esta publicación del blog para descargar los archivos de código fuente.
Carrusel de imágenes arrastrables en JavaScript [Códigos fuente]
Para crear un control deslizante de imágenes arrastrables con HTML, CSS y JavaScript, siga los pasos indicados línea por línea:
- Cree una carpeta. Puede poner cualquier nombre a esta carpeta y crear los archivos mencionados a continuación dentro de esta carpeta.
- Cree un archivo index.html. El nombre del archivo debe ser index y su extensión .html
- Cree un archivo style.css. El nombre del archivo debe ser style y su extensión .css
- Cree un archivo script.js. El nombre del archivo debe ser script y su extensión .js
- Descargue la carpeta de imágenes de Google Drive y coloque esta carpeta dentro de la carpeta del proyecto.
Primero, pegue los siguientes códigos en su archivo index.html.
HTML
<!DOCTYPE html>
<!-- Coding By YodeimiGomez - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Draggable Image Slider | Yodeimi Gomez</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<i id="left" class="fa-solid fa-angle-left"></i>
<div class="carousel">
<img src="images/img-1.jpg" alt="img" draggable="false">
<img src="images/img-2.jpg" alt="img" draggable="false">
<img src="images/img-3.jpg" alt="img" draggable="false">
<img src="images/img-4.jpg" alt="img" draggable="false">
<img src="images/img-5.jpg" alt="img" draggable="false">
<img src="images/img-6.jpg" alt="img" draggable="false">
<img src="images/img-7.jpg" alt="img" draggable="false">
<img src="images/img-8.jpg" alt="img" draggable="false">
<img src="images/img-9.jpg" alt="img" draggable="false">
</div>
<i id="right" class="fa-solid fa-angle-right"></i>
</div>
</body>
</html>En segundo lugar, pegue los siguientes códigos en su archivo style.css.
CSS
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
padding: 0 35px;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #343F4F;
}
.wrapper{
display: flex;
max-width: 1200px;
position: relative;
}
.wrapper i{
top: 50%;
height: 44px;
width: 44px;
color: #343F4F;
cursor: pointer;
font-size: 1.15rem;
position: absolute;
text-align: center;
line-height: 44px;
background: #fff;
border-radius: 50%;
transform: translateY(-50%);
transition: transform 0.1s linear;
}
.wrapper i:active{
transform: translateY(-50%) scale(0.9);
}
.wrapper i:hover{
background: #f2f2f2;
}
.wrapper i:first-child{
left: -22px;
display: none;
}
.wrapper i:last-child{
right: -22px;
}
.wrapper .carousel{
font-size: 0px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
scroll-behavior: smooth;
}
.carousel.dragging{
cursor: grab;
scroll-behavior: auto;
}
.carousel.dragging img{
pointer-events: none;
}
.carousel img{
height: 340px;
object-fit: cover;
user-select: none;
margin-left: 14px;
width: calc(100% / 3);
}
.carousel img:first-child{
margin-left: 0px;
}
@media screen and (max-width: 900px) {
.carousel img{
width: calc(100% / 2);
}
}
@media screen and (max-width: 550px) {
.carousel img{
width: 100%;
}
}Por último, pegue los siguientes códigos en su archivo script.js.
JavaScript
const carousel = document.querySelector(".carousel"),
firstImg = carousel.querySelectorAll("img")[0],
arrowIcons = document.querySelectorAll(".wrapper i");
let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
const showHideIcons = () => {
// showing and hiding prev/next icon according to carousel scroll left value
let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
}
arrowIcons.forEach(icon => {
icon.addEventListener("click", () => {
let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
// if clicked icon is left, reduce width value from the carousel scroll left else add to it
carousel.scrollLeft += icon.id == "left" ? -firstImgWidth : firstImgWidth;
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
});
});
const autoSlide = () => {
// if there is no image left to scroll then return from here
if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
let firstImgWidth = firstImg.clientWidth + 14;
// getting difference value that needs to add or reduce from carousel left to take middle img center
let valDifference = firstImgWidth - positionDiff;
if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
}
// if user is scrolling to the left
carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
}
const dragStart = (e) => {
// updatating global variables value on mouse down event
isDragStart = true;
prevPageX = e.pageX || e.touches[0].pageX;
prevScrollLeft = carousel.scrollLeft;
}
const dragging = (e) => {
// scrolling images/carousel to left according to mouse pointer
if(!isDragStart) return;
e.preventDefault();
isDragging = true;
carousel.classList.add("dragging");
positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
carousel.scrollLeft = prevScrollLeft - positionDiff;
showHideIcons();
}
const dragStop = () => {
isDragStart = false;
carousel.classList.remove("dragging");
if(!isDragging) return;
isDragging = false;
autoSlide();
}
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);
document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);Eso es todo, ahora has creado con éxito un control deslizante de imágenes arrastrables en HTML, CSS y JavaScript. Si tu código no funciona o has tenido algún problema, descarga los archivos de 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 de código fuente y las imágenes.
