Control deslizante de imágenes HTML CSS JavaScript

1,356 AmirAliAkrami

Abrir en el editor Publica tu código

Control deslizante de imágenes HTML CSS JavaScript

Recomendado

16 January 2025

Ejemplo de página de destino de sitio web de películas

24 April 2025

Un código de Metehan

2 June 2025

Un código de gustavosalvador212

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>

CSS