Control deslizante de imágenes HTML CSS JavaScript

361 AmirAliAkrami

Abrir en el editor Publica tu código

Control deslizante de imágenes HTML CSS JavaScript

Recomendado

12 January 2025

Un código de Mikeykun

23 August 2025

Plantilla de sitio web de portafolio de diseñador web

29 August 2025

Fragmento de animación de memoria CSS

HTML

<!DOCTYPE html>
<html lang="mk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Слајдер</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .slider {
            position: relative;
            max-width: 100%;
            margin: auto;
            overflow: hidden;
        }
        .slides {
            display: flex;
            transition: transform 0.5s ease;
        }
        .slide {
            min-width: 100%;
            box-sizing: border-box;
        }
        .navigation {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
        }
        .button {
            background-color: rgba(255, 255, 255, 0.8);
            border: none;
            cursor: pointer;
            padding: 10px;
        }
    </style>
</head>
<body>

function nextSlide() {
        showSlide(currentSlide + 1);
    }

function prevSlide() {
        showSlide(currentSlide - 1);
    }
</script>

</body>
</html>

Recomendado

Un código de Mikeykun

Plantilla de sitio web de portafolio de diseñador web

Fragmento de animación de memoria CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS