Slider di immagini HTML CSS JavaScript

349 AmirAliAkrami

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

22 July 2025

Spinner dell'icona di caricamento CSS

17 July 2025

Sinfonia dello stato di Hover

26 October 2024

Modello di sito Web per portfolio di sviluppatori HTML 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>

Consigliato

Spinner dell'icona di caricamento CSS

Sinfonia dello stato di Hover

Modello di sito Web per portfolio di sviluppatori HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS